Javascript 在页眉滚动过去后，修复页面顶部的菜单栏

首先，如果这是一个太开放的问题，我道歉

我知道将网页的标题设置为静态，以便它始终在视口顶部可见，并且当您向下滚动时，内容会在其下方传递。这完全可以通过css实现

我想知道你将如何实现让页眉滚动离开页面，但在顶部留下一个静态的水平菜单栏。这是一个完美的例子

---

我看到它调用了一个JavaScript函数

onHeaderComplete.execute（）

，我假设当标题滚动关闭时，该函数会对导航栏应用额外的css样式，但我不确定它是如何工作的。任何基本的解释都值得赞赏，因为我的JavaScript技能相对有限。

我刚刚回答了类似的问题

---

你可以这样写：

$(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
         $('div').addClass('fix');
    } else {
         $('div').removeClass('fix');
    }
});

CSS

.fix{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
}

---

选中此复选框，您也可以通过创建两次菜单，使用纯CSS来完成此操作。这并不理想，但它让您有机会在菜单位于顶部时对其进行不同的设计，并且您除了CSS之外没有其他功能，没有jquery：

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

---

这里有一把小提琴让你看：

谢谢，我可以问一下

#stickyalis

div的用途吗？没有它能工作吗？

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }