Question

我写了一个函数，让div元素在滚动时粘到顶部。

当它写成这样的时候它起作用（'＃sticky-anchor-for-social'是检测元素的移动距离，'＃social-media'是元素棒）：

function sticky_socialmedia() {
    var window_top = $(window).scrollTop();
    var social_top = $('#sticky-anchor-for-social').offset().top - 88;
    if (window_top >= social_top) {
       $('#social-media').addClass('stick-social');
    } else {
       $('#social-media').removeClass('stick-social');
    }
}

$(window).scroll(sticky_socialmedia);
sticky_socialmedia();

但是当我这样写时它不起作用：

function stickyWhenScroll(anchor, sticky) {
    var window_top = $(window).scrollTop();
    var filter_top = $(anchor).offset().top - 88;
    if (window_top >= filter_top) {
       $(sticky).addClass('stick-filter');
    } else {
       $(sticky).removeClass('stick-filter');
    }
 }

 $(window).scroll(stickyWhenScroll);
 stickyWhenScroll('#sticky-anchor-for-social','#social-media');

什么可能出错？非常感谢！

Answer 1

您需要在添加活动时将参数发送到您的功能，您可以使用bind执行此操作：

$(window).bind('scroll', {
    anchor: '#sticky-anchor-for-social', 
    sticky: '#social-media'
}, stickyWhenScroll).trigger('scroll');

通过传递trigger('scroll')，您可以立即触发该功能。

在您的功能中，您可以通过访问event.data：

来检索它们

function stickyWhenScroll(event) {
    var data = event.data;
    var anchor = data.anchor;
    var sticky = data.sticky;
    ...
}

Fiddle

Answer 2

因为在你的第二个片段中，滚动事件处理程序没有收到任何参数。您既可以传递params（加载和滚动），也可以将它们声明为全局变量，并在函数中使用它们。

(function stickyWhenScroll(anchor, sticky) {
    var window_top = $(window).scrollTop();
    var filter_top = $(anchor).offset().top - 88;
    if (window_top >= filter_top) {
        $(sticky).addClass('stick-filter');
    } else {
        $(sticky).removeClass('stick-filter');
    }
}('#sticky-anchor-for-social', '#social-media'));

$(window).scroll(function() {
    stickyWhenScroll('#sticky-anchor-for-social','#social-media');
});

滚动时使元素粘到顶部

2 个答案: