这是我的javaskript,我认为问题出在这里? 它会跳,那么如何修复它。 无法到达底部
window.onscroll = function() {
myFunction();
};
var navbar = document.getElementById("navbar");
var placeholder = document.getElementById("navbar-placeholder");
var sticky = navbar.offsetTop - 10;
function myFunction() {
if (window.scrollY >= sticky) {
navbar.classList.add("sticky");
placeholder.style.height = navbar.offsetHeight + "px"; // Set placeholder height
} else {
navbar.classList.remove("sticky");
placeholder.style.height = "0"; // Reset placeholder height
}
}
这是我的CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Arial", sans-serif;
font-size: 15px;
}
h1 {
margin-bottom: 5%;
}
p {
margin-bottom: 10%;
}
/* image */
img {
max-width: 100%;
max-height: 100%;
}
/* Set dimensions for the container */
.top {
width: 100%;
height: auto;
}
/* navbar */
#navbar {
overflow: hidden;
background-color: rgba(0, 200, 300);
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
margin-bottom: 5%;
}
#navbar a {
float: left;
display: block;
color: rgb(3, 33, 133);
text-align: center;
padding: 20px;
text-decoration: none;
transition: background-color 0.3s;
}
#navbar a:hover {
background-color: #bfc291;
}
#navbar a.darker {
background-color: #222;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #222;
z-index: 1000;
}
.sticky + .content {
padding-top: 60px;
}
/* center af text */
.center-text {
text-align: center;
margin-top: 0;
}
.footer-basic {
padding:40px 0;
background-color:rgba(0, 200, 300);
color: rgba(3, 33, 133);
}
.footer-basic .social {
text-align:center;
padding-bottom:25px;
}
.footer-basic .social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
border-radius:50%;
border:1px solid #ccc;
margin:0 50px;
color:inherit;
opacity:0.75;
}
.footer-basic .social > a:hover {
background-color: #bfc291;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:rgba(3, 33, 133);
margin-bottom:0;
}
.footer-link {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}