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

使用jQuery粘贴DIV

1 个答案: