Stick/Unstick一个基于页面滚动的元素

Question

我正在使用 https://github.com/garand/sticky 将元素粘贴到页面滚动时的屏幕顶部。它工作得很好，但我正在尝试使用它的 $("#sticker").unstick(); 功能在我到达页面的特定部分时取消粘贴相同的元素。

我怎样才能做到这一点？

这是我到目前为止所做的；

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="url/sticky.min.js"></script>
<script>
    $(document).ready(function(){
    $(".banner").sticky({topSpacing:60});
    $(".banner").unstick();
 });
</script>

<div class="banner"><img src="addresstoimage.jpg"></div>

Answer 1

sticky 插件会自动为您粘贴和取消粘贴。

您需要同时设置：topSpacing 和 bottomSpacing 参数，您的元素将粘在这两个位置之间。

$(document).ready(function() {
    $(".banner").sticky(
        {
            topSpacing: 60,
            bottomSpacing: 100
        });
});

Stick/Unstick一个基于页面滚动的元素

Stick/Unstick an element based on page scroll

javascript

jquery

sticky