粘性元素在滚动条的孔上表现不同答案

【问题标题】：sticky element behaves differently on the poressence of a scroll bar粘性元素在滚动条的孔上表现不同
【发布时间】：2018-11-04 00:03:14
【问题描述】：

我试图模仿左侧菜单和顶部栏的 SO 页面行为，两者都是粘性的。该设计是一个单页动态应用程序，所以当我说“切换页面”时，我实际上是在更改单个页面的 html。

我创建了一个菜单作为列表和一个栏将它们设置为粘性如下：

#topNav {
    margin: 0px;
    width: 100%;
    height: 40px;;
    overflow: hidden;
    list-style-type: none;
    color: white;
    background-color: rgb(22, 16, 99);
    position: sticky;
    position: -webkit-sticky;
    top: 0; /* required */
    z-index: 1;
}

.menu {
    margin: 0;
    padding: 0;
    padding-top: 20px;
    position: sticky;
    position: -webkit-sticky;
    top: 40px; /* required */
    border-right: 2px solid black;
}

但是，现在发生的情况是，如果有滚动条，则菜单比没有滚动条时稍微偏左（可能 3 个像素）。这会产生一种非常丑陋的效果，因为在文本很少的页面和大页面之间切换会移动所有内容，使其足以让人注意到。如何防止滚动条重新格式化文本？

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以将overflow-y:scroll 设置为该容器。这使得无论内容如何，滚动始终显示。因此，您的内容在切换页面时不会四处移动。

更新：如果您不希望滚动始终显示，则必须检测 container has a scrollbar through javascript 是否并将一个类附加到您的菜单，将其移动到其原始位置。 这是一个小提琴示例：http://jsfiddle.net/85a0sc4r/

【讨论】：

这可行，但如果不需要滚轮，我宁愿没有滚轮