jQuery的粘性DIV

Question

I made a DIV that sticks using jQuery. It works, however, I'm trying to make it so that it scrolls down or up, as seen on this page: http://www.southbayfuso.com/custom-bodies.php . Notice how the "Quick Quote" DIV pauses for a second or two before smoothly scrolling up or down. What can I add to my code so that my sticky DIV scrolls just like the one on the example above? Thanks for any help.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    var s = jQuery("#sticker");
    var pos = s.position(); 
    var stickermax = jQuery(document).outerHeight() - jQuery("#footer").outerHeight() - s.outerHeight() - 40; // 40 value is the total of the top and bottom margin.
    jQuery(window).scroll(function() {
        var windowpos = jQuery(window).scrollTop();
        if (windowpos >= pos.top && windowpos < stickermax) {
            s.attr("style", ""); // Turn off absolute positioning.
            s.addClass("stick"); // Stick it.
        } else if (windowpos >= stickermax) {
            s.removeClass(); // Unstick.
            s.css({position: "absolute", top: stickermax + "px"}); // Set sticker right above the footer.
        } else {
            s.removeClass(); // Top of page.
        }
    });
});
</script>

Answer 1

Take a look at jQuery throttle/debounce .

$(window).scroll($.throttle( 250, function(){
    console.log('only once every 250 ms')
}));

$(window).scroll($.throttle( 250, function(){
    console.log('only only called after the scroll event hs stopped firing for 250 ms')
}));

To update your existing code:

jQuery(document).ready(function() {
    var s = jQuery("#sticker");
    var pos = s.position(); 
    var stickermax = jQuery(document).outerHeight() - jQuery("#footer").outerHeight() - s.outerHeight() - 40; // 40 value is the total of the top and bottom margin.
    jQuery(window).scroll($.throttle( 250, function(){
        var windowpos = jQuery(window).scrollTop();
        if (windowpos >= pos.top && windowpos < stickermax) {
            s.attr("style", ""); // Turn off absolute positioning.
            s.addClass("stick"); // Stick it.
        } else if (windowpos >= stickermax) {
            s.removeClass(); // Unstick.
            s.css({position: "absolute", top: stickermax + "px"}); // Set sticker right above the footer.
        } else {
            s.removeClass(); // Top of page.
        }
    });
});