Question

我正在尝试使用以下CSS在网站上创建一个效果，其中元素固定在浏览器的底部：

div.featured-image {
width: 100%;
position: fixed;
z-index: 10;
}

我想要发生的是使用类似http://vertstudios.com/blog/demo/stickyscroller/demo.php之类的东西来阻止该项目滚动 UP 超过某一点。我在网站顶部放置了一个绝对定位的徽标，如果浏览器不够高，则不希望固定项重叠。所以我试图让它无法滚动到顶部大约800px的缓冲区，但仍然保持固定在页面的底部。

Answer 1

您可以使用JQuery执行此操作，并根据css动态设置/重置元素的顶部和底部scrollTop()属性。

示例JQuery：

$('#footer').css('top','550px'); 
$(document).bind('scroll',function(event) {
    var scrollTop = $(window).scrollTop();
    if (scrollTop <= 550) { 
        $('#footer').css('bottom',''); 
        $('#footer').css('top','550px'); 
    } else {
        $('#footer').css('top',''); 
        $('#footer').css('bottom','0px');
    }
});

CSS（div＃footer）：

#footer{
    position: fixed;
    left: 0px;
    display: block;
    background-color: green;
    z-index: 10;
    height: 100px;
    width: 100%;
}

工作fiddle。

是否可以使用jquery的反向粘性卷轴？

1 个答案: