為什么我的導航欄不能使用javascript代碼-有解無憂

我正在做一個個人專案。我試圖練習使用其他語言庫（例如 Javascript）為我的網站添加更多樣式

當嘗試這樣做時，我正在使用這個w3schools 課程，但我似乎無法讓它作業。我錯過了什么？

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>

uj5u.com熱心網友回復：

您的代碼中的問題是因為getElementByClass()不是有效的方法。它被稱為getElementsByClassName()- 但是在這種情況下即使這樣也是錯誤的，因為它回傳一個集合而不是您的代碼所期望的單個元素。

查看原始文章和您所做的更改，這里最好的方法是使用querySelector()類選擇器，以便它回傳單個.topnav元素。

另請注意，您可以對代碼進行一些其他改進，例如使用addEventListener()而不是onscroll，以及classList.toggle()使用布爾“開關”引數。這是一個作業示例：

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>

順便說一句，我強烈建議不要使用 W3Schools。他們的文章經常過時（如本例），有時甚至完全是錯誤的。MDN是一個更好的 Javascript 資源。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/531658.html

標籤：javascripthtmlcss

上一篇：不需要的CSS樣式被應用于我的div？

下一篇：如何將下拉選單和影像放在同一行