粘滯表頭在滾動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>