滾動時使元素停留在頂部

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

小提琴

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