为什么我的粘性菜单在更改为 position:fixed 时会向左跳转

Question

我在尝试创建粘性菜单时在我的网站上遇到了一个奇怪的行为。好吧，粘性菜单还可以，但是当它粘住时（向下滚动页面后）它突然向左移动。

我认为这与将样式更改为 position:fixed 有某种关系。我怎样才能使菜单保持相同的大小，居中，就像它在未粘贴时的样子？

您可以查看现场演示 here。谢谢。

Answer 1

简单，给它一套width

.isStuck { width:100%; }

Answer 2

宽度 100% 无效，因为您的布局有侧边栏，所以您需要减去侧边栏和内边距宽度

.isStuck {
  z-index: 1000;
  width: calc(100% - 480px);
}

Answer 3

为@media 查询下的 id #menu 添加特定样式

@media only screen and (min-width: 769px)
.isStuck #menu {
width: calc(100% - 480px);
}


@media only screen and (max-width: 768px) 
.isStuck { 
 z-index: 1000;
 width: calc( 100% - 8%); 
}

Answer 4

好的，伙计们，我使用您的技术和一些@media 查询使它工作并完全响应。你们很棒，谢谢你们的帮助。最终代码：

@media only screen and (min-width: 769px) {
    .isStuck #menu { width: calc(100% - 480px); }
}

@media (max-width: 991px) {
    .isStuck #menu { width: calc(100% - 100px); }
}

@media (min-width: 481px) and (max-width: 767px){
        .isStuck { width: calc(100% - 40px); }
}

@media (max-width: 480px){
        .isStuck { width: calc(100% - 50px); }
}

为什么我的粘性菜单在更改为 position:fixed 时会向左跳转

Why does my sticky menu jump left when changing to position:fixed

jquery

html

css

menu

sticky