滚动时使元素停留在顶部

Question

I've written a function to make a div element stick to top when scrolling.

it works when it's written like this('#sticky-anchor-for-social' is to detect moving distance of the element, '#social-media' is the element sticks):

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

but it doesn't work when I write it like this:

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

what could possibly go wrong? many thanks!

Answer 1

You need to send your parameters to your function when adding the event, you can do that with bind :

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

By passing trigger('scroll') you can trigger the function straight away.

And in your function you can retrieve them by accesing the event.data :

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

Fiddle

Answer 2

Because in your 2nd snippet the scroll event handler hasn't received any params. You could either pass params both times (load and scroll) or declare those as global variables and use them within the function.

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