Javascript 为什么在小屏幕上滚动时，导航栏会向右移动一点？

正如问题所指出的，我的问题是，当我将窗口调整为小尺寸并向右滚动导航栏的浮动元素时，会向右滑动一点，在窗口中不再完全可见

一般来说，我对网络开发还很陌生，所以如果有任何帮助，我将不胜感激

这是我的滚动功能的代码：

// When the user scrolls the page, execute myFunction
window.onscroll = myFunction
// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

提前谢谢

---

代码如下：

发生此行为的原因是元素超出了正常的文档流，因此它没有占用其容器div的宽度（

navbar wrapper

）。您需要明确地计算

粘性
元素上的宽度

我使用了
width:calc（100%-60px）！重要信息

100%
表示在您的情况下视口宽度的100%。现在总共减去
60px
，因为在
body
元素上定义了
30px
左右边距

！重要
（看起来不重要，但它意味着这很重要）位是必需的，因为您在稍后使用JS显式地添加
粘性
类，此时所有CSS属性都已应用了相应的。因此，最初应用于
width
的内容将由您使用
覆盖！重要信息

注意-注意！应避免重要使用。如果您负责创建自己的css，并且正在经历大量使用！这在代码中很重要，表明CSS可以利用重构。


//当用户滚动页面时，执行myFunction
window.onscroll=myFunction
//获取导航栏
var navbar=document.getElementById（“navbar”）；
//获取导航栏的偏移位置
var sticky=navbar.offsetTop；
//到达滚动位置时，将sticky类添加到导航栏。离开滚动位置时移除“粘性”
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}
html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：自动；
填充：0px；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
最大宽度：900px；
字体系列：“PMN Caecilia”，无衬线；
文本对齐：对齐；
列表样式：十进制；
}
/*旧浏览器的HTML5显示角色重置*/
文章
在一边
细节，
figcaption，
图形
页脚，
标题，
hgroup，
菜单，
导航，
部分{
显示：块；
}
身体{
溢出y：滚动；
利润率：30像素；
线高：1.6；
字体大小：120%；
最大宽度：800px；
边缘底部：100px；
背景色：#FAFAFA；
颜色：#000000；
}
h1{
字体大小：220%；
字体系列：“PMN Caecilia”，无衬线；
边缘底部：30px；
边缘顶部：30px；
}
氢{
字体系列：“PMN Caecilia”，无衬线；
字体大小：160%；
}
p{
字号：85%；
边缘顶部：30px；
边缘底部：30px；
}
a{
颜色：#8000FF；
文字装饰：无；
位置：相对位置；
}
#导航栏{
浮动：左；
高度：80px；
宽度：100%；
最大宽度：800px；
顶部：0px；
溢出：隐藏；
背景色：#FAFAFA；
}
#导航栏a{
顶部：0px；
填充顶部：30px；
填充底部：30px；
}
#导航栏a：之后{
内容：“；
位置：绝对位置；
左：0%；
右：100%；
底部：-5px；
背景：#8000FF；
高度：3倍；
过渡属性：左-右；
过渡时间：0.3s；
过渡定时功能：缓解；
}
#导航栏a:悬停：之后{
右：0%；
}
.粘的{
位置：固定；
排名：0；
宽度：计算（100%-60px）！重要；
}
.标题{
宽度：100%；
顶部：0px；
边缘底部：100px；
}
.内容{
顶部：0px；
宽度：100%
}

这将是我的个人网站！
你好，世界！
Lorem ipsum dolor sit amet，是一位杰出的献身者。大前庭，大前庭，大前庭。维韦拉·波苏尔是威尼斯人。这是一个巨大的风险。努克·阿利奎姆·康莫多·莫里斯·内克·卢克图斯。金樱子。在交通工具的前方。佩伦茨克·尤伊斯莫德，purus id Temporal imperdiet，justo turpis前庭酒后驾车，非三色性侵权。faucibus中的lobortis Suspendisse faucibus nisl。前庭静脉腔隙。前庭只是选台，euismod坐在amet tellus sed，hendrerit Pelletsque tellus。未怀孕的妇女。两个非狮子座的人坐在同侧非同侧。在sem中，这是一个非常简单的例子。悬钩子和口红舌苔。
我们的大门是绿色的。在tellus felis，bibendum vel eleifend vitae，孕妇的营养素。努克·塞德·埃利芬德·里索斯。在酵母菌enim。佩朗蒂克·马莱苏阿达·自由和托托·瓦里乌斯，以及波尔蒂托·里苏斯·比本杜姆。但亨德雷特·森佩尔·萨皮恩，费吉亚·坦帕斯·维利特·亨德雷特在。这是一种暂时的健康，也是一种智慧的变化。在诺拉奥奇，莫利斯和酵母菌ac，马来酸和尼西。在梅特斯和阿梅特阿库的奥纳雷·阿库姆桑饲养猫咪。前庭为奥古斯，前庭为叶舌，前庭为调味品。在酒后驾车时，驾驶的是一辆非nisi车辆。猫舌苔中的毛里斯。粗俗的习惯