Currently in the process of designing a website, I've run into an issue where whenever I scroll with my sticky header, the page automatically jumps to the bottom of the next element. Does anyone have any insights on what might be causing this odd behavior?
I've attempted tweaking the padding settings for various elements on the page such as the banner, heading, text content, and even anchor elements, but unfortunately nothing has resolved the problem.
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 -->