为什么我的粘性菜单在更改到位置时向左跳转：已修复

Question

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

我认为它在某种程度上与将风格改为位置相关：固定。 如何使菜单保持相同的尺寸，居中，就像在取消操作时一样？

您可以查看实时演示here。谢谢。

Answer 1

简单，给它一组width

.isStuck { width:100%; }

Answer 2

宽度100％无效，因为您的布局有侧边栏，因此您需要减去侧边栏和填充宽度

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

Answer 3

在@media query

下为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); }
}