我当前正在创建一个网站,并且遇到问题,每当我用粘性标题滚动时,页面就会跳到下一个元素的底部,有人知道为什么会这样吗?
我尝试更改页面上基本上所有元素的填充,包括横幅,标题,文本本身,甚至锚元素,但似乎没有任何方法可以解决我的问题。
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
body {
margin: 0px;
font-family: 'Roboto';
background-color: white;
}
.header {
padding: 10px 16px;
background: white;
color: black;
width: 100%;
border-bottom: 1px solid grey;
}
.content {
padding-top: : 16px;
padding-bottom: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
nav>div>a {
padding: 6px 20px;
}
h3:hover {
color: rgb(128, 128, 128)
}
h3 {
display: inline-block;
}
.banner {
width: 100%;
padding-top: 0px;
padding-bottom: 10px;
}
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.header-text {
width: 100%;
text-align: right;
margin-right: 25px;
}
.logo {
margin-bottom: -80px;
}
<!DOCTYPE html>
<html>
<head>
<title> Nick Pemberton - About </title>
<link rel="preload" href="../js/java.js" as="script">
<link rel="preload" href="../css/main.css" as="style">
<link rel="prerender" href="Gallery.html">
<link rel="prerender" href="about.html">
<link rel="prerender" href="HomePage.html">
<link rel="preload" href="../photos/kilc/banner.jpg" as="image">
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Nick Pemberton">
<link rel="stylesheet" href="../css/main.css">
<!-- Link to main.css -->
</head>
<!-- /head -->
<body>
<nav class="header" id="myHeader"><img src="../photos/test.png" class="logo">
<div class="header-text">
<a href="HomePage.html">
<h3>Home
<!-- Home -->
</h3>
</a>
<a href="Gallery.html">
<h3>Gallery
<!-- Gallery -->
</h3>
</a>
<a href="about.html">
<h3>About</h3>
</a>
</div>
</nav>
<!-- Nav Bar -->
<content class="content">
<img class="banner" src="../photos/kilc/banner.jpg"> A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually
here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed
it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch
of text is usually here, removed it since it is not relevant.
</content>
<!-- Content -->
<script src="../js/java.js">
</script>
</body>
<!-- body -->
</html>
<!-- html -->
答案 0 :(得分:0)
您正在使用自定义标记content
来创建问题,因为默认情况下它将是一个内联元素,而padding-top
将无法正常工作。使用简单的div
或将display:block
添加到该标签:
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
window.onscroll=myFunction;
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
body {
margin: 0px;
font-family: 'Roboto';
background-color: white;
}
.header {
padding: 10px 16px;
background: white;
color: black;
border-bottom: 1px solid grey;
}
.content {
padding-top: 16px;
padding-bottom: 16px;
font-size:32px;
}
.sticky {
position: fixed;
top: 0;
left:0;
right:0;
}
.sticky+.content {
padding-top: 102px;
}
nav>div>a {
padding: 6px 20px;
}
h3:hover {
color: rgb(128, 128, 128)
}
h3 {
display: inline-block;
}
.banner {
width: 100%;
padding-top: 0px;
padding-bottom: 10px;
}
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.header-text {
width: 100%;
text-align: right;
margin-right: 25px;
}
.logo {
margin-bottom: -80px;
}
<nav class="header" id="myHeader">
<div class="header-text">
<a href="HomePage.html">
<h3>Home
<!-- Home -->
</h3>
</a>
<a href="Gallery.html">
<h3>Gallery
<!-- Gallery -->
</h3>
</a>
<a href="about.html">
<h3>About</h3>
</a>
</div>
</nav>
<!-- Nav Bar -->
<div class="content">
A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
</div>
<!-- Content -->
您还可以简化代码并考虑sticky
的位置而不是固定的位置:
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
body {
margin: 0px;
font-family: 'Roboto';
background-color: white;
}
.header {
padding: 10px 16px;
background: white;
color: black;
border-bottom: 1px solid grey;
position:sticky;
top:0;
}
.content {
padding-top:16px;
padding-bottom: 16px;
font-size:32px;
}
.sticky+.content {
padding-top: 102px;
}
nav>div>a {
padding: 6px 20px;
}
h3:hover {
color: rgb(128, 128, 128)
}
h3 {
display: inline-block;
}
.banner {
width: 100%;
padding-top: 0px;
padding-bottom: 10px;
}
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.header-text {
width: 100%;
text-align: right;
margin-right: 25px;
}
.logo {
margin-bottom: -80px;
}
<nav class="header" id="myHeader">
<div class="header-text">
<a href="HomePage.html">
<h3>Home
<!-- Home -->
</h3>
</a>
<a href="Gallery.html">
<h3>Gallery
<!-- Gallery -->
</h3>
</a>
<a href="about.html">
<h3>About</h3>
</a>
</div>
</nav>
<!-- Nav Bar -->
<div class="content">
A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
</div>
<!-- Content -->