滚动拉伸后导航栏过多

Question

我有导航栏，并且正在使用js来固定导航栏的位置。向下滚动后，因为我将宽度增加了100％，因此导航栏的拉伸程度超过了它应该的范围，并且遍历了我的布局

我的脚本

$(window).on("scroll", function(){
 if ($(window).scrollTop()) {
  $('nav').addClass('sticky');
 } else {
  $('nav').removeClass('sticky');
 }
})

Css

.sticky {
position: fixed;
top: 0;
width: 100%;
}

链接到网站，以便您了解正在发生的事情click here

Answer 1

我建议您使用定位杆属性

例如：{{1}}。您应该在已定义高度的容器内使用它。

参考：https://developer.mozilla.org/pt-BR/docs/Web/CSS/position#Sticky_positioning

Answer 2

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

在这里可能是您的问题。 将100％更改为所需的实际宽度，因为您的对象使标头对象处于静态位置，因此不再对宽度进行调节。 此修补程序很快但又很脏。请考虑必须将布局更改应用于所有具有固定宽度的div，而且响应功能更难实现。选项B将是一个更好的解决方案。

另一种解决方案是在page div和对象之间插入一个，并在那里设置固定宽度。细分允许对齐对象。宽度为100％的内部对象将与文档树中的下一个div对齐。

Answer 3

.sticky {
position: fixed;
top: 0;
width: 100%;

}

在这里，您可以提供所需的宽度值（以像素为单位）。或者，如果您想将它与相对值一起使用，则可以为其创建一个容器，因为它将从父元素开始计算位置，为该容器提供一个固定的宽度值，然后将您的元素添加到其中。