当滚动时使元素粘在顶部

Question

我编写了一个函数，使div元素在滚动时保持在顶部。

当它写成这样时，它就会工作(‘#粘滞-锚-for-social’是用来检测元素的移动距离，‘#社会化媒体’是元素棒)：

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

小提琴

Answer 2

因为在第二个片段中，滚动事件处理程序没有收到任何对角。您可以同时传递参数(加载和滚动)，或者将其声明为全局变量，并在函数中使用它们。

(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');
});