I am making a personal project. I was attempting to practice using other language libraries such as Javascript to add more style to my website
When attempting to do this I was using this w3schools lesson, but I cant seem to get it to work. Did I miss something?
window.onscroll = function() {
myFunction()
};
var topnav = document.getElementByClass("topnav");
var sticky = topnav.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
topnav.classList.add("sticky")
} else {
topnav.classList.remove("sticky");
}
}* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYY0m5M4elle5s14mIhUSPJQJNXWE626vaxJfyLMp-t5aQYsuS8fDBTApBr1bvM6Yu4L4:https://files.123freevectors.com/wp-content/original/110787-dark-color-blurred-background-vector.jpg&usqp=CAU);
background-size: cover;
}
/* Header/Blog Title */
.header {
padding: 0px;
text-align: center;
}
.header h1 {
font-size: 50px;
}
/* header overflow fix*/
.header>* {
width: 50%;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/*Make id's for main content sections to than asighn images with fixed sizes and no overflow*/
#first3dp {
background-color: white;
background-image: url("https://i.all3dp.com/wp-content/uploads/2021/01/21134921/Lead.jpg");
background-size: contain;
background-repeat: no-repeat;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
img {
width: 50%;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
/* atempt for sticky nav bar */
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky .content {
padding-top: 60px;
}<div >
<div >
<img src="./images/Strike_Printng-removebg-preview.png" alt="lightning bolt with logo name " strike printing>
<!--<h1>strike printing</h1>-->
</div>
<div >
<a href="#">Home</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Contact Us</a>
</div>
<div >
<div >
<div >
<h2>Who are we</h2>
<h5>sometime, 2012</h5>
<div id="first3dp" style="height:200px;"></div>
<p></p>
</div>
<div >
<h2>where i am now?</h2>
<h5>august 2022</h5>
<div style="height:200px;">Image</div>
<p></p>
<p></p>
</div>
</div>
<div >
<div >
<h2>About Us</h2>
<div style="height:100px;">Image</div>
<p></p>
</div>
<div >
<h3>Popular Post</h3>
<div >
<p>Image</p>
</div>
<div >
<p>Image</p>
</div>
<div >
<p>Image</p>
</div>
</div>
<div >
<h3>Follow Us</h3>
<p>Some text.. can use embed with social media links</p>
</div>
</div>
</div>
<div >
<h2>Footer</h2>
<h2>Footer to include credits to website creators and copyright information</h2>
</div>
</div>CodePudding user response：
The issue in your code is because getElementByClass() isn't a valid method. It's called getElementsByClassName() - however even this would be wrong in this case, as that returns a collection and not a single element as your code expects.
Looking at the original article and the change you've made, the best approach here would be to use querySelector() with a class selector so that it returns the single .topnav element.
Also note that there's a couple of other improvements you can make to the code, such as using addEventListener() instead of onscroll, and classList.toggle() with a boolean 'switch' argument. Here's a working example:
window.addEventListener('scroll', myFunction);
const topnav = document.querySelector(".topnav");
const sticky = topnav.offsetTop;
function myFunction() {
topnav.classList.toggle("sticky", window.pageYOffset >= sticky);
}* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYY0m5M4elle5s14mIhUSPJQJNXWE626vaxJfyLMp-t5aQYsuS8fDBTApBr1bvM6Yu4L4:https://files.123freevectors.com/wp-content/original/110787-dark-color-blurred-background-vector.jpg&usqp=CAU);
background-size: cover;
}
/* Header/Blog Title */
.header {
padding: 0px;
text-align: center;
}
.header h1 {
font-size: 50px;
}
/* header overflow fix*/
.header>* {
width: 50%;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/*Make id's for main content sections to than asighn images with fixed sizes and no overflow*/
#first3dp {
background-color: white;
background-image: url("https://i.all3dp.com/wp-content/uploads/2021/01/21134921/Lead.jpg");
background-size: contain;
background-repeat: no-repeat;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
img {
width: 50%;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
/* atempt for sticky nav bar */
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky .content {
padding-top: 60px;
}<div >
<div >
<img src="./images/Strike_Printng-removebg-preview.png" alt="lightning bolt with logo name " strike printing>
<!--<h1>strike printing</h1>-->
</div>
<div >
<a href="#">Home</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Contact Us</a>
</div>
<div >
<div >
<div >
<h2>Who are we</h2>
<h5>sometime, 2012</h5>
<div id="first3dp" style="height:200px;"></div>
<p></p>
</div>
<div >
<h2>where i am now?</h2>
<h5>august 2022</h5>
<div style="height:200px;">Image</div>
<p></p>
<p></p>
</div>
</div>
<div >
<div >
<h2>About Us</h2>
<div style="height:100px;">Image</div>
<p></p>
</div>
<div >
<h3>Popular Post</h3>
<div >
<p>Image</p>
</div>
<div >
<p>Image</p>
</div>
<div >
<p>Image</p>
</div>
</div>
<div >
<h3>Follow Us</h3>
<p>Some text.. can use embed with social media links</p>
</div>
</div>
</div>
<div >
<h2>Footer</h2>
<h2>Footer to include credits to website creators and copyright information</h2>
</div>
</div>As an aside, I would strongly suggest not using W3Schools. Their articles are often outdated (as in this case) and sometimes just plain wrong. MDN is a far better resource for Javascript.