正如问题所示，我的问题是，当我将窗口大小调整为小尺寸并向下滚动时，导航条的浮动元素向右滑动了一点，并且在窗口中不再完全可见。
我对web开发非常陌生，所以任何帮助都会非常感激。
这是我的滚动函数的代码:// 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");
}
}
提前感谢。
下面是代码:https://jsfiddle.net/mxfiddle/fubLo45j/这种行为正在发生，因为position:fixed元素超出了正常的文档流，所以它没有采取其容器div (navbar-wrapper)的宽度。您需要显式地计算sticky元素的宽度。
我用了width:calc(100% - 60px) !important。
100%表示视口宽度的100%在你的例子中是宽度。现在减去60px，因为你有30px的左右边距定义在你的body元素。
!important(它看起来不重要，但它意味着这很重要)位是必需的，因为你在以后的时间使用JS显式地添加你的sticky类，当所有的CSS属性已经用适当的具体应用。因此，width最初应用的内容将被!important覆盖。
注意-!应避免使用重要的。如果你负责创建自己的css，并且经常使用!重要的，这表明你的CSS可以利用重构。
// 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");
}
}html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: auto;
padding: 0px;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
max-width: 900px;
font-family: "PMN Caecilia", sans-serif;
text-align: justify;
list-style: decimal;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
overflow-y: scroll;
margin: 30px;
line-height: 1.6;
font-size: 120%;
max-width: 800px;
margin-bottom: 100px;
background-color: #FAFAFA;
color: #000000;
}
h1 {
font-size: 220%;
font-family: "PMN Caecilia", sans-serif;
margin-bottom: 30px;
margin-top: 30px;
}
h2 {
font-family: "PMN Caecilia", sans-serif;
font-size: 160%;
}
p {
font-size: 85%;
margin-top: 30px;
margin-bottom: 30px;
}
a {
color: #8000FF;
text-decoration: none;
position: relative;
}
#navbar {
float: left;
height: 80px;
width: 100%;
max-width: 800px;
top: 0px;
overflow: hidden;
background-color: #FAFAFA;
}
#navbar a {
top: 0px;
padding-top: 30px;
padding-bottom: 30px;
}
#navbar a:after {
content: "";
position: absolute;
left: 0%;
right: 100%;
bottom: -5px;
background: #8000FF;
height: 3px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
#navbar a:hover:after {
right: 0%;
}
.sticky {
position: fixed;
top: 0;
width: calc(100% - 60px) !important;
}
.header {
width: 100%;
top: 0px;
margin-bottom: 100px;
}
.content {
top: 0px;
width: 100%
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>This will be my personal webiste!</title>
<link href="/Users/max/Desktop/Site/set.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/Users/max/Desktop/Site/navbar.js" async></script>
</head>
<body>
<div class="navbar-wrapper" style="height: 80px">
<div id="navbar">
<a style="float: left" href="/Users/max/Desktop/Site/index.html">Hello World!</a>
<a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Writing.html">Writing</a>
<a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Projects.html">Projects</a>
<a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/About.html">About</a>
</div>
</div>
<div class="header">
<h1>Hello, World!</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit quam magna, vitae viverra magna accumsan quis. Quisque venenatis nisl eu erat viverra posuere. Cras sed risus ut tortor porttitor luctus et ac velit. Nunc aliquam commodo mauris nec luctus. Phasellus commodo rutrum diam id placerat. In pretium nec metus quis vehicula. Pellentesque euismod, purus id tempor imperdiet, justo turpis vestibulum dui, non tristique tortor est a urna. Suspendisse lobortis faucibus nisl in faucibus. Vestibulum id lacus justo. Vestibulum justo lectus, euismod sit amet tellus sed, hendrerit pellentesque tellus. Nulla semper et tellus eu gravida. Duis non leo sit amet augue sagittis convallis non id ipsum. Sed nec nisi sit amet augue facilisis ullamcorper et in sem. Suspendisse ut purus nec ligula varius dictum.
Etiam porta nunc eu urna luctus porta. In tellus felis, bibendum vel eleifend vitae, gravida suscipit metus. Nunc sed eleifend risus. In at fermentum enim. Pellentesque malesuada libero ut tortor varius, ut porttitor risus bibendum. Ut hendrerit semper sapien, feugiat tempus velit hendrerit in. Aliquam consequat tempor urna, et varius sapien luctus eu. In nulla orci, mollis et fermentum ac, malesuada et nisi. Proin sed felis at metus ornare accumsan at sit amet arcu. Vestibulum enim augue, feugiat vel ligula in, aliquet condimentum mi. Curabitur ullamcorper dui ante, sit amet vehicula neque hendrerit id. Phasellus malesuada non nisi sed convallis. Mauris in ligula vel felis bibendum viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada pellentesque imperdiet. Nam pretium odio in tellus pulvinar malesuada.
</p>
</div>
</body>