why cant my nav bar work with javascript code

November 10, 2022

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 class="content">
  <div class="header">
    <img src="./images/Strike_Printng-removebg-preview.png" alt="lightning bolt with logo name " strike printing>
    <!--<h1>strike printing</h1>-->
  </div>

  <div class="topnav">
    <a class="active" href="#">Home</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#" style="float:right">Contact Us</a>
  </div>

  <div class="row">
    <div class="leftcolumn">
      <div class="card">
        <h2>Who are we</h2>
        <h5>sometime, 2012</h5>
        <div class="fakeimg" id="first3dp" style="height:200px;"></div>
        <p></p>
      </div>

      <div class="card">
        <h2>where i am now?</h2>
        <h5>august 2022</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p></p>
        <p></p>
      </div>

    </div>
    <div class="rightcolumn">
      <div class="card">
        <h2>About Us</h2>
        <div class="fakeimg" style="height:100px;">Image</div>
        <p></p>
      </div>

      <div class="card">
        <h3>Popular Post</h3>
        <div class="fakeimg">
          <p>Image</p>
        </div>
        <div class="fakeimg">
          <p>Image</p>
        </div>
        <div class="fakeimg">
          <p>Image</p>
        </div>
      </div>

      <div class="card">
        <h3>Follow Us</h3>
        <p>Some text.. can use embed with social media links</p>
      </div>
    </div>
  </div>

  <div class="footer">
    <h2>Footer</h2>
    <h2>Footer to include credits to website creators and copyright information</h2>
  </div>
</div>

>Solution :

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 class="content">
  <div class="header">
    <img src="./images/Strike_Printng-removebg-preview.png" alt="lightning bolt with logo name " strike printing>
    <!--<h1>strike printing</h1>-->
  </div>

  <div class="topnav">
    <a class="active" href="#">Home</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#" style="float:right">Contact Us</a>
  </div>

  <div class="row">
    <div class="leftcolumn">
      <div class="card">
        <h2>Who are we</h2>
        <h5>sometime, 2012</h5>
        <div class="fakeimg" id="first3dp" style="height:200px;"></div>
        <p></p>
      </div>

      <div class="card">
        <h2>where i am now?</h2>
        <h5>august 2022</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p></p>
        <p></p>
      </div>

    </div>
    <div class="rightcolumn">
      <div class="card">
        <h2>About Us</h2>
        <div class="fakeimg" style="height:100px;">Image</div>
        <p></p>
      </div>

      <div class="card">
        <h3>Popular Post</h3>
        <div class="fakeimg">
          <p>Image</p>
        </div>
        <div class="fakeimg">
          <p>Image</p>
        </div>
        <div class="fakeimg">
          <p>Image</p>
        </div>
      </div>

      <div class="card">
        <h3>Follow Us</h3>
        <p>Some text.. can use embed with social media links</p>
      </div>
    </div>
  </div>

  <div class="footer">
    <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.