2

我有一个 div 位于页面顶部，就在标题栏的正下方。当用户向下滚动并且栏上升时，我希望它只上升到浏览器窗口的边缘，然后像固定一样停留在那里。

这怎么可能？仅使用 CSS 可行还是我需要 jQuery？我更喜欢 jQuery 的跨浏览器兼容性。

这是我目前使用的简单的 css 代码：

#fbLikeDiv
{
    position: fixed;
    top: 95px;
    left: 10px;
}

您还可以查看该站点：www.myskoob.com/postish/ - 它是关于左侧 Facebook 喜欢框，当用户向下滚动时，我想留在浏览器窗口的顶部边缘，但首先去直到那里。

4

1 回答 1

12

我认为这就是您要寻找的：http: //jsfiddle.net/QuVkV/3/

您确实需要使用一些 jQuery。在上面的例子中，跟随 id="bar" 的 div

这里的html结构：

<div id='wrapper'>
    <div id='upper'>This is upper content</div>
    <div id='position-saver'>
        <div id='bar'>This is your facebook like button</div>
    </div>
    <div id='lower'>This is some content lower than the menu bar</div>
</div>

这是CSS：

#wrapper {
    width: 100%;
    height: 2000px;
}

#upper {
    width: 100%;
    height: 100px;
}

#position-saver {
    height: 50px;
    width: 100%;
}

#bar {    
    position: static;
    height : 50px;
    width: 100%;
}

这是javascript：

$(document).on('scroll', function(){
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){
        $("#bar").css({position: "fixed", top:0});            
    }
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
        $("#bar").css({position: "static", top: 0});           
    }            
});
于 2012-05-21T13:27:01.777 回答