New course! Every coder should learn Generative AI!
Try a free lesson+ 1
Have a bug
What's wrong with this? I found a w3school example of sticky navigation. In the console it displays: Uncaught TypeError: Cannot read property 'offsetTop' of null https://code.sololearn.com/WECJ659yWLbd/?ref=app
8 Answers
+ 2
The following is closer to what you want:
<!DOCTYPE html >
<html lang="en">
<head>
<title>bib</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
header{
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
content{
padding: 16px;
}
.sticky{
position: fixed;
top: 0;
background-color: #555;
width: 100%
}
p {
margin-bottom: 155px;
}
</style>
</head>
<body >
<div class="top-container">
<h1>Scroll Down</h1>
<p>Scroll down to see the sticky effect.</p>
</div>
<header>
<div id="myHeader">
<h2>My Header</h2>
</div>
</header>
<div class="content">
<h3>On Scroll Sticky Header</h3>
<p>The header will stick to the top..</p>
<p>Scroll back up to remove the sticky effect.</p>
<p>Some text to enable scrolling..</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var header=document.getElementById("myHeader");
var y= header.offsetTop;
function myFunction() {
if (window.pageYOffset > y) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
document.addEventListener('scroll', myFunction);
});
</script>
</body>
</html>
+ 4
I would have said more but Sololearn has a character limit.
Specifically, you had the following problems:
- You're accessing the document before it fully loads. That is fixed in my code by using DOMContentLoaded.
- you have invalid characters in your HTML as revealed by a character that looks like "." appearing in Sololearn's HTML editor.
- MyHeader is not the same as myHeader. id is case sensitive.
- emove("sticky");.. emove function doesn't exist. It looks like you want to listen for the document scroll event anyway.
- header isn't defined anywhere. You defined x to be an element and that's what you probably want to name "header".
- the myHeader needs a dark background colour to be readable.
- Indentation is messed up which makes it hard to follow the code.
My fixed version is in another answer so I don't run over Sololearn's character limit for an answer.
+ 2
'DOMContentLoaded' isn't always needed to use JavaScript but since JavaScript typically needs access to a loaded document, something similar to DOMContentLoaded is almost always needed.
There are other ways to run a function only after the document is fully loaded.
For example, your body tag could say something like <body onload="initializeStickyHeader()"> and you define the initializeStickyHeader function instead of the anonymous function I wrote in my fixed version when calling addEventListener('DOMContentLoaded'.
If jQuery is used, I'd use something like $(document).ready(initializeStickyHeader).
Ipang, yes I did that a couple times but that leads to a bunch of discuss-related codes in my code list when I really want to show off codes that I wrote more from scratch. Deleting the code later returns to the original problem. My answer gets broken links later or I need to include everything from the separate code into the original answer. It is nice to keep the question and answer in good shape in case people ask similar questions months or years later.
+ 1
Josh Greig tnx alot. Is document.addEventListener('DOMContentLoaded',function() always necessary?
+ 1
Josh Greig why this tip wasn't in sololearn tutorial? I mean's if we must add this to our code alltime.
+ 1
Josh Greig emov😂.yes I know this isn't exist! That's because Part of my code was deleted!
+ 1
There's a way that we can get by the character limits by saving an edited code and share its link instead. This is especially true if the code is rather big (over 10 lines + indents). We can choose to delete (or not) edited codes later afterwards, once the code had been copied by OP.
+ 1
Josh Greig
The codes in our profiles are sorted by date of last update or creation. If we have some codes we want to be on top of our code list, we can update them so they will be prioritized on top. Leave discuss-related codes untouched so they move into lower slot in the list.
Maybe discuss-related code won't bloat the list if SL allows virtual folders so we can manage which codes goes where. I personally don't mind to have them in : )
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help with homework
0 Votes
please help me emotionally
1 Votes
While loop problem maybe?
2 Votes
What next?
0 Votes