javascript - 使用 jQuery 粘性 DIV

Question

我使用 jQuery 制作了一个 DIV。但是，它有效，我正在尝试使其向下或向上滚动，如本页所示:http://www.southbayfuso.com/custom-bodies.php 。请注意“快速报价”DIV 如何暂停一两秒，然后平滑地向上或向下滚动。我可以在代码中添加什么，以便我的粘性 DIV 能够像上面示例中的那样滚动？感谢您的帮助。

<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

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

要更新现有代码:

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