CSS位置x时的固定位置

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

这怎么可能？只有CSS才行吗？还是我需要jQuery？我宁愿jQuery的跨浏览器兼容性。

这里是我使用至今的简单明了的CSS代码：

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

你也可以看看网站：www.myskoob.com/postish/ - 这是关于Facebook的左像盒子一样，当用户向下滚动时，我想停留在浏览器窗口的顶部边缘，但首先会一直延伸到那里。

来源

2012-05-21 weltschmerz

我会说jquery：http://www.google.co.in/search?sourceid=chrome&ie=UTF-8&q=jquery+fixed+menu+when+scroll – Johan

我如果CSS允许像'min-top'和'min-bottom'这样的属性与'min-width'和'max-width'一起使用，那么会很好。可悲的是，我认为我们必须等到CSS4。 – Blazemonger

我认为这是你在找什么：http://jsfiddle.net/QuVkV/3/

你需要使用一些jQuery的。在上面的例子中，遵循使用id = “酒吧”

这里HTML结构的DIV：

<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-21 13:27:01 gabitzish

@ gabitzish完美，这正是我需要的！谢谢！ – weltschmerz

CSS位置x时的固定位置

回答

相关问题