Question

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

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

以下是我目前使用的简单明了的css代码：

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

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

Answer 1

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

你需要使用一些jQuery。在上面的示例中，请按照id =＆＃34; bar＆＃34;

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

CSS在x位置固定位置

1 个答案: