Липкий заголовок таблицы при прокрутке в 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, теперь новый вопрос я пытаюсь реализовать это на заголовок таблицы и заголовок таблицы стягивается в заголовке ширина данных, «какая DRAG !!!!!», вот пример кода // Таблица 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

Недостаточно видеть ваше реальное приложение, трудно сказать, в чем проблема. Но я думаю, что вы, вероятно, работаете с document.ready от jQuery, и это что-то ломает.

Для кода, который работает с DOM, вы должны добавить свой код к методу ссылки для директивы. Затем вы можете безопасно работать с DOM, потому что он готов при вызове метода link.

Пожалуйста, взгляните на демо внизу или в этом 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>