Javascript 滚动位置后的粘性导航

在下面的网站上，我有一个导航栏。

我使用以下css代码进行导航：

z-index: 999;
position: relative;
background: #302f2f; /* Old browsers */
background: -moz-linear-gradient(top,  #302f2f 0%, #000000 100%);
background: -webkit-linear-gradient(top,  #302f2f 0%,#000000 100%);
background: linear-gradient(to bottom,  #302f2f 0%,#000000 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#302f2f', 
endColorstr='#000000',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 7px 31px -5px #000;
border-bottom: 15px solid #ff9500;s

a我使用Javascript代码固定位置：

$(window).scroll(function () {
if ($(window).scrollTop() > 1) {
    $('#navigationsleiste').css('top', $(window).scrollTop());
}
}

现在，当我滚动导航栏时，在浏览器窗口的顶部有一个空间。但是我不想要那个空间/空隙。有人知道我为什么会有这个间隙/空间吗？

而不是$（窗口）在$（文档）上设置得更好： $（'#navigationsliste'）.css（'top'，$（document.scrollTop（））

改为$（窗口）在$（文档）上设置得更好：

---

$（'#navigationsliste'）.css（'top'，$（document.scrollTop（））

关于“为什么存在差距”的答案已经在我相信的评论中得到了回答

更一般地说，关于如何解决问题：

CSS有一个

position

属性，非常适合您的粘性菜单：

position:fixed

。当菜单在视图外滚动时，将其位置更改为“固定”。一旦它回到原来的位置，你就移除了你的固定位置

您希望在scroll上执行的方法中尽可能少地执行，因为它经常被触发。一旦在一个卷轴上执行了太多的代码，您就会失去平滑的60fps帧速率

所以你可以做的是：

• 确保您始终知道粘性菜单的顶部离窗口顶部有多远
• 在滚动上，检查是否已达到该点
• 相应地在菜单中添加或删除类

下面是一个例子：

$（文档）.ready（函数（）{
var$doc=$（文档）；
变量$menu=$（“nav”）；
var menuTop=0；
var setMenuTop=函数（）{
menuTop=$menu.offset（）.top；
}
$（窗口）。调整大小（setMenuTop）；
$doc.scroll（函数（）{
$menu.toggleClass（“是固定的，（$doc.scrollTop（）>menuTop））；
});
setMenuTop（）；
});
正文{
宽度：400px；
保证金：0自动；
}
标题{
高度：160px；
背景：橙色；
}
导航{
高度：40px；
背景：黄色；
改变：转变；
}
导航是固定的{
位置：固定；
宽度：400px；
排名：0；
}
.是固定+冠词{
边缘顶端：40px；
}

标题
菜单
内容
Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

Lorem ipsum dolor sit amet，奉献精英。托塔姆·努拉·埃尼姆公寓？如果你是一个有远见的人，奎登·杜西莫斯（quidem ducimus）会阻止你的妻子不去腐败。雷姆·维利特建筑师奥姆尼斯·莫尔斯蒂亚斯，雷佩拉特

我相信在评论中已经回答了“为什么存在差距”的问题

更一般地说，关于如何解决问题：

CSS有一个
position
属性，非常适合您的粘性菜单：
position:fixed
。当菜单在视图外滚动时，将其位置更改为“固定”。一旦它回到原来的位置，你就移除了你的固定位置

您希望在scroll上执行的方法中尽可能少地执行，因为它经常被触发。一旦在一个卷轴上执行了太多的代码，您就会失去平滑的60fps帧速率

所以你可以做的是：


确保您始终知道粘性菜单的顶部离窗口顶部有多远
在滚动上，检查是否已达到该点
相应地在菜单中添加或删除类

下面是一个例子：


$（文档）.ready（函数（）{
var$doc=$（文档）；
变量$menu=$（“nav”）；
var menuTop=0；
var setMenuTop=函数（）{
menuTop=$menu.offset（）.top；
}
$（窗口）。调整大小（setMenuTop）；
$doc.scroll（函数（）{
$menu.toggleClass（“是固定的，（$doc.scrollTop（）>menuTop））；
});
setMenuTop（）；
});
正文{
宽度：400px；
保证金：0自动；
}
标题{
高度：160px；
背景：橙色；
}
导航{
高度：40px；
背景：黄色；
改变：转变；
}
导航是固定的{
位置：固定；
宽度：400px；
排名：0；
}
.是固定+冠词{
边缘顶端：40px；
}

标题
菜单
内容
奥雷姆·伊普苏姆·多洛·西特·阿迪皮西