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

如果没有看到更多真实应用，很难说出问题所在。但我认为您可能正在使用jQuery中的document.ready而且这会破坏某些内容。

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

请查看下面的演示或此fiddle。

基本代码来自此blog post我只将其添加到指令中。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

因此，在处理html DOM时，进程总是使用指令，现在新问题是我试图在表头上实现这个，并且表头缩小到头数据宽度，＆＃34;什么是DRAG !!!!!＆＃34;，这是示例代码 //表格标题锁定-------------

<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;
}

在angularJs中滚动时粘滞表头

2 个答案: