Javascript 条固定在顶部，但仅当滚动试图隐藏它时

我在我的网页的最高区域，但不是在顶部。我希望当用户滚动页面时，它保持在顶部，但只有当它将被取消时。如果标题是可见的，我希望它下面的菜单，在一个明显的静态位置

不使用javascript，只使用css，这是可能的吗？我在网站上看到了，但我不记得在哪里

---

提前谢谢你（为我难听的英语道歉！）

我不确定，但我在很多网站上都见过这种类型的东西。9gag.com上的一个

无论如何，您可以使用css的

position

属性

像这个：

---

scroll me div的

位置：fixed

和

top:15px

使其始终位于顶部15px

我想这就是您要寻找的：

此处为html结构：

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

下面是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});           
    }            
});

$（文档）.on（'scroll'，function（）{
if（$（'#bar'）[0].offsetTop<$（document.scrollTop（））{
$（“#bar”）.css（{位置：“固定”，顶部：0}）；
}
if（$（文档）.scrollTop（）<$（“#位置保护程序”）[0].offsetTop）{
$（“#bar”）.css（{位置：“static”，顶部：0}）；
}            
});

这只有通过使用JavaScript才能实现。仅供参考，我发现了一个这种效果的实例。我建议使用firebug/developer控制台深入研究，看看他们是如何使用javascript创建效果的。该网站是：仅使用固定位置将导致菜单始终保持在顶部：15px@davidgnin希望菜单滚动，直到上面的标题被隐藏，然后保持不变。谢谢。正是这样，我对你的例子做了修改。你能告诉我为什么它不能这样工作吗？将条形位置更改为“固定”会使其宽度相对于主体，因此也必须更改宽度。这里：$（'#bar'）[0]表示返回第一个#bar？我用它将jQuery对象转换为html元素。

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

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

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

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

$(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});           
    }            
});