如何在jQuery中有效地处理jQuery(window).scroll函数?

时间:2017-02-05 19:31:16

标签: javascript jquery angularjs angularjs-directive

这是我目前的代码,感觉效率不高,如果使用Timer / Timeout可能会更好。但是,我很失落如何去做。

有人可以帮忙吗?使用javascript效率不高。我的JS家伙正在休假。

app.directive('ScrollBar', function () {
    return {
        restrict: 'A',
        scope: {},
        link: function postLink(scope, elem, attrs) {
            jQuery(window).scroll(function(){
                var SBar = jQuery("#ScrollStop").offset();
                var screenPosition = jQuery(document).scrollTop() + window.innerHeight;
                if (screenPosition < SBar.top) {
                    jQuery(".ScrollClass").fadeIn();
                }
                if (screenPosition >= SBar.top) {
                    jQuery( ".ScrollClass" ).fadeOut();
                }
            });
        }
    };
})

1 个答案:

答案 0 :(得分:1)

如果你通过绑定滚动功能区分滚动方向会很好,我有一个小提琴,希望它有所帮助。

  

http://jsfiddle.net/kavinhuh/17hca7wa/

myApp.directive('scrolly', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
        var lastScrollTop = 0;
            var raw = element[0];
            console.log('loading directive');

            element.bind('scroll', function () {
                console.log('in scroll');
                if(raw.scrollTop < lastScrollTop)
              {
              alert("scroll up");
              lastScrollTop = raw.scrollTop;
              }
              else{
              lastScrollTop = raw.scrollTop;
              }

                if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) {
                    scope.$apply(attrs.scrolly);
                }
            });
        }
    };
});