粘滞表头在滚动angularJs

Question

我想创建一个表头，得到固定在一定的。这里是我工作过的一个样本（这是我真正需要的AngularJS）http://plnkr.co/edit/cxZzrMeiYyaoQQOotX3H?p=preview，但它不适用于真正的应用程序，我不知道我在想什么。得到一些建议和可能的代码示例会很好。

vm.testScroll = function() { 
    console.log("insideTestScroll---"); 
    var window_top = $($window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) { 
     console.log(window_top + " " + div_top); 
     $('#sticky').addClass('stick'); 
    } else { 
     console.log(window_top + " " + div_top); 
     $('#sticky').removeClass('stick'); 
    } 
    console.log("after removeClass!"); 
}; 

console.log("entering testScroll function call-"); 
$window.onscroll = vm.testScroll(); 
console.log("running windowScroll"); 

Answer 1

所以过程总是manupulating的HTML DOM，现在新的问题我想实现这个在表头时使用指令和表头缩小到页眉数据宽度，“这太麻烦了!!!!!”，这里是示例代码 //表HeaderLocking -------------

<table class="table" ts-wrapper> 
<thead id="testTable"> 
<th><label class="checkbox"> 
<input type="checkbox" ng-model="vm.selectAll" ng-change="vm.selectAllResults();"> 
</label></th> 

function tableScroll() { 
    var directive = { 
     restrict: 'A', 
     link: function(scope,element){ 
     element.bind('scroll', function(){ 
     console.log("scrollingTable"); 
     //var test = element[0].scrollHeight - element.scrollTop(); 
     var test = element.scrollTop(); 
     scope.test = test; 
     console.log(test); 
     if(test >= '391'){ 
      console.log("reached!"); 
      angular.element($('#testTable')).addClass('tableHeader'); 
     } 
     else if(test<'391'){ 
      console.log("moreToGo"); 
      angular.element($('#testTable')).removeClass('tableHeader'); 
     }  

      }); 
     } 
    }; 
    return directive; 
} 

Answer 2

没有看到更多真实应用程序，很难说出什么问题。 但我想你可能与jQuery的document.ready合作，这是打破了一些东西。

对于使用DOM的代码，您应该将代码添加到指令的链接方法中。然后，您可以安全地使用DOM，因为在链接方法被调用时它已准备就绪。

请看下面的演示或在fiddle。

基本代码是从这个blog post我只将它添加到指令中。

angular.module('demoApp', []) 
 
\t .directive('sticky', StickyDirective); 
 

 
function StickyDirective() { 
 
    
 
    return { 
 
     restrict: 'A', 
 
    \t link: function(scope, elem, attrs) { 
 
      $(window).scroll(sticky_relocate); 
 
    \t \t sticky_relocate(); 
 
     } 
 
    }; 
 
    
 
    function sticky_relocate() { 
 
     \t var window_top = $(window).scrollTop(); 
 
     var div_top = $('#sticky-anchor').offset().top; 
 
     if (window_top > div_top) { 
 
      $('#sticky').addClass('stick'); 
 
     } else { 
 
      $('#sticky').removeClass('stick'); 
 
     } 
 
    } 
 
}

#sticky { 
 
    padding: 0.5ex; 
 
    width: 600px; 
 
    background-color: #333; 
 
    color: #fff; 
 
    font-size: 2em; 
 
    border-radius: 0.5ex; 
 
} 
 
#sticky.stick { 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 10000; 
 
    border-radius: 0 0 0.5em 0.5em; 
 
} 
 
body { 
 
    margin: 1em; 
 
} 
 
p { 
 
    margin: 1em auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" sticky=""> 
 
<p>Made for my post: <a href="http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html">Stick div at top after scrolling</a>.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, 
 
    lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh 
 
    lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. 
 
    Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus 
 
    non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. 
 
    Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan 
 
    ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis 
 
    gravida.</p> 
 
<div id="sticky-anchor"></div> 
 
<div id="sticky">This will stay at top of page</div> 
 
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas 
 
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, 
 
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur 
 
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum 
 
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant 
 
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> 
 
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi 
 
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum 
 
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices 
 
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum 
 
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit 
 
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi 
 
    tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur 
 
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque 
 
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. 
 
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. 
 
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse 
 
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna 
 
    porttitor suscipit.</p> 
 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris 
 
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. 
 
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus 
 
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod 
 
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales 
 
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. 
 
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla 
 
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque 
 
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. 
 
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci 
 
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p> 
 
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas 
 
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, 
 
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur 
 
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum 
 
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant 
 
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> 
 
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi 
 
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum 
 
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices 
 
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum 
 
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit 
 
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi 
 
    tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur 
 
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque 
 
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. 
 
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. 
 
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse 
 
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna 
 
    porttitor suscipit.</p> 
 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris 
 
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. 
 
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus 
 
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod 
 
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales 
 
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. 
 
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla 
 
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque 
 
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. 
 
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci 
 
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p> 
 
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas 
 
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, 
 
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur 
 
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum 
 
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant 
 
    morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
 
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p> 
 
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi 
 
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum 
 
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices 
 
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum 
 
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit 
 
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi 
 
    tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur 
 
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque 
 
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar. 
 
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum. 
 
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse 
 
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna 
 
    porttitor suscipit.</p> 
 
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris 
 
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. 
 
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus 
 
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod 
 
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales 
 
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. 
 
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla 
 
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque 
 
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. 
 
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci 
 
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p> 
 
</div>