Javascript 使用 HTML/CSS 的浮动菜单栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5316117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Floating menu bar using HTML/CSS?
提问by Jon Kyte
wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.htmljavascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?
想知道是否有人知道一种创建浮动菜单栏的方法，该菜单栏会固定在页面上的某个点上，直到浏览器窗口在页面下方足够远并将其松开，然后菜单栏开始随之滚动。我想要的效果和这个http://www.jtricks.com/javascript/navigation/floating.htmljavascript 菜单完全一样。但是，我真的很想用 CSS 来做到这一点。我知道我可以使 div 绝对定位，它会在页面上向下移动，我尝试使一个 DIV 相对定位（父 div），然后在其中设置另一个绝对定位的 div，但我无法让它工作。有谁知道如何使用 CSS 进行这项工作，还是需要使用 JS？
Thanks in advance.
提前致谢。
Jon.
乔恩。
回答by agradl
I believe using javascript is the only solution to get the effect you described. Here's a quick demoof a banner that starts in a absolute position and goes to fixed when the user scrolls.
我相信使用 javascript 是获得您描述的效果的唯一解决方案。这是一个以绝对位置开始并在用户滚动时固定的横幅的快速演示。
<div style="height:1000px;width:500px;">
<div id="floatbar" style="background:gray;
width:200px;
height:40px;
position:absolute;
left:0;top:200px;">
</div>
</div>
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
回答by Naftali aka Neal
well if you do NOT need the animation, than just use position: fixed;
in the css.
好吧，如果您不需要动画，那么只需position: fixed;
在 css 中使用即可。
if you want it animated you need to use javascript. for example in jquery:
如果你想要动画，你需要使用 javascript。例如在 jquery 中：
$(window).scroll(function(){
$('#menu').css({
right: 0,
top: 0
})
})
回答by Stanislav Ageev
Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.
好吧，你不能用相对内的绝对定位 div 来做到这一点。固定位置基本上是一个绝对定位的div，相对于窗口定位。我会说你在这里肯定需要javascript。
回答by Kory
This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...
使用固定的侧边栏和浮动内容部分，这应该很容易。尝试这样的事情......
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 620px;
padding: 0 20px 20px;
}
回答by Richard Rodriguez
I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.
我相信它需要是JS。我可以想象使用 jQuery 可能会相当简单，而且我真的想不出任何方法来仅使用 CSS 来实现这一点。我会试着考虑一下，但我怀疑我会找到解决方案。
