如问题所示，我的问题是，当我将窗口调整为较小的尺寸并向下滚动时，导航栏的浮动元素会向右滑动一点，并且在窗口中不再完全可见。
一般而言，我对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");
}
}
提前致谢。
发生这种现象的原因是position:fixedelement超出了常规文档流的范围，因此没有占用其容器div（navbar-wrapper）的宽度。您需要sticky显式计算元素上的宽度。
我已经习惯width:calc(100% - 60px) !important了。
该100%装置的宽度的100％，视你的情况宽度。现在60px总共减去，因为您30px在body元素上定义了左右边距。
的!important（看起来并不重要，但它意味着这很重要），因为你要添加的位是必需的sticky类明确地在稍后的时间使用JS当所有的CSS属性已经与相应的应用specificty。因此width，您最初使用会覆盖最初申请的任何内容!important。
注意-避免使用！important。如果您负责创建自己的CSS并在代码中遇到！important的主要用法，则表明您的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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句