Javascript 滚动时尝试使导航菜单停留在屏幕顶部

我正在努力使我的菜单在滚动时粘在顶部。我举了一个例子：

然而，我的菜单位于一个较小的中间分区内。当菜单在顶部变为“粘住”时，它会被推到页面的右侧。这是我的小提琴：

如何在将菜单设置为“固定”时使其保留在容器内

CSS:

JS:

$（窗口）。滚动（功能（e）{
$el=$（'nav'）；
如果（$（this.scrollTop（）>80&&$el.css（'position'）！='fixed'）{
$（'nav'）.css（{'position'：'fixed'，'top'：'-10px'}）；
}
if（$（this.scrollTop（）<80&&$el.css（'position'）=='fixed'））{
$（'nav'）.css（{'position'：'absolute'，'top'：'63px'}）；
}
});

您需要将left:150、right:0放入函数中，如下所示：

 $(window).scroll(function (e) {
        $el = $('nav');
        if ($(this).scrollTop() > 80 && $el.css('position') != 'fixed') {
            $('nav').css({ 'position': 'fixed', 'top': '-10px', 'left':'150px', 'right':'0'});
        }
        if ($(this).scrollTop() < 80 && $el.css('position') == 'fixed') {
            $('nav').css({ 'position': 'absolute', 'top': '63px', 'left':'', 'right':'' });
        }
    });

$（窗口）。滚动（功能（e）{
$el=$（'nav'）；
如果（$（this.scrollTop（）>80&&$el.css（'position'）！='fixed'）{
$（'nav'）.css（{'position'：'fixed'，'top'：'-10px'，'left'：'150px'，'right'：'0'}）；
}
if（$（this.scrollTop（）<80&&$el.css（'position'）=='fixed'））{
$（'nav'）.css（{'position'：'absolute'，'top'：'63px'，'left'：''，'right'：''}）；
}
});

---

这里是工作JSFIDLE:

问题是，当您向元素添加

位置：fixed

时，它会将该元素从文档流中删除。它粘在所有其他元素之上，保持它们的浮动

您的

nav

样式中有

right:0

。只要它处于绝对位置，它就会附着在其父对象的右侧

将其更改为“固定位置”时，它也会附着在其父对象的右侧，在这种情况下，即视口

您可以通过在“固定”状态下更改位置来固定它：

$('nav').css({ 
    'position': 'fixed', 
    'top': '-10px',
    'left': '50%',
    'margin-left': '-250px' /* container width - image width */
});

---

同时检查此项。

关闭。导航条在切换到“固定”时仍会覆盖图片的一部分。真漂亮！你能在上面的答案中做些改变吗？

 $(window).scroll(function (e) {
        $el = $('nav');
        if ($(this).scrollTop() > 80 && $el.css('position') != 'fixed') {
            $('nav').css({ 'position': 'fixed', 'top': '-10px', 'left':'150px', 'right':'0'});
        }
        if ($(this).scrollTop() < 80 && $el.css('position') == 'fixed') {
            $('nav').css({ 'position': 'absolute', 'top': '63px', 'left':'', 'right':'' });
        }
    });

$('nav').css({ 
    'position': 'fixed', 
    'top': '-10px',
    'left': '50%',
    'margin-left': '-250px' /* container width - image width */
});