Javascript 滚动时使元素粘在顶部

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

当它是这样写的时候，它就工作了（“#社交粘性锚”是用来检测元素的移动距离，#社交媒体“是元素棒）：

但当我这样写的时候，它不起作用：

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

可能会出什么问题？

---

非常感谢

添加事件时，您需要将参数发送到函数，您可以通过以下方式完成此操作：

通过传递

trigger（'scroll'）

可以立即触发该函数

在您的函数中，您可以通过访问

事件来检索它们。data

：

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

---

因为在第二个代码段中，滚动事件处理程序没有收到任何参数。可以同时传递参数（加载和滚动），也可以将其声明为全局变量并在函数中使用

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

---

因为当您滚动时，事件将被触发。在第一次尝试中，您引用了函数内部的元素，但第二次尝试中，您没有引用函数内部的元素，而是尝试在函数外部引用元素，这样做是无效的\。谢谢！它起作用了。但是我想使用第二个代码段的原因是，我有两个元素都需要在不同的页面中粘贴到顶部，所以我想编写一个函数，然后向它们传递不同的参数以使它们都工作。但是答案似乎没有达到，我该怎么做？谢谢！它也很好地工作！但与另一个答案相同，我想使用第二个代码段的原因是，我有两个元素都需要在不同的页面中粘贴到顶部，所以我想编写一个函数，然后向它们传递不同的参数以使这两个都能工作，有什么方法可以实现吗？可以在两个页面上都使用函数，但引用不同的元素，或者只是把元素称为相同的东西？

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

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