CSS在x位置固定位置

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为"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});           
    }            
});