Question

我尝试制作一个导航栏，一旦它通过某个点就会粘住，我在w3schools上编辑了默认的粘滞代码并添加了一个动画并且有效。但是当我在我的文件中添加相同的代码时，它什么也没做。为什么不工作，我该如何解决？我在这个小提琴中发布了相关代码。 https://jsfiddle.net/yL3e9Lk4/

我也为W3schools的演示做了一个小提琴。

https://jsfiddle.net/o65zca6w/

HTML：

var navbar = document.getElementById("navbar");
var sticky = stickpoint.offsetTop;

function StickyNav() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
    navbar.classList.add("slide-in-top")
    navbar.classList.remove("nav")
  } else {
    navbar.classList.add("nav")
    navbar.classList.remove("sticky");
    navbar.classList.remove("slide-in-top")
  }
}

body {
  /*background-color: #333;*/
  overflow-x: hidden;
  margin: 0px;
  background: #333;
}

.nav {
  list-style-type: none;
  overflow: hidden;
  display: inline-block;
  z-index: 2;
  position: absolute;
  border: solid;
  border-color: red;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.li {
  text-align: center;
}

.flex-container {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
}

.flex-item {
  margin: 5px;
}

.resize-anchor {
  display: inline-block;
  height: auto;
  width: 300px;
}

.hplogo-a {
  display: inline-block;
  height: auto;
  width: 200px;
  min-width: 200px;
}

a {
  display: inline-block;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

a:hover {
  color: #D1946F;
  text-decoration: none;
}

a:link {
  color: #D1946F;
  text-decoration: none;
}

.nav-link {
  margin: 0px 10px 30px 10px;
  font-family: Calibri;
  font-size: 18px;
  font-style: normal;
  font-variant: normal;
  line-height: 26.4px;
  padding: 0px 10px 0px 10px;
  margin-top: 20px;
}

img {
  width: 100%;
}

p {
  color: white;
  text-align: center;
}

h5,
h3 {
  text-align: center;
  color: #D1946F;
}

<div id="navbar" class="li flex-container nav">
  <a class="nav-link flex-item col-md-2" href="#">PHOTOGRAPHER</a>
  <a class="nav-link flex-item col-md-2 " href="#">PORTFOLIO</a>
  <a class="hplogo-a flex-item col-md-2" href=""><img id="logo" src="http://www.kraftheinzcompany.com/pressroom/images/view/kraftlogolarge.jpg" alt=""></a>
  <a class="nav-link flex-item col-md-2" href="#">INVESTMENT + FAQ</a>
  <a class="nav-link flex-item col-md-2" href="#">BLOG</a>
</div>



<div class="container bottom PHOTOGRAPHER">


  <h3>THROUGH MY LENS... YOUR STORY.</h3>
  <p>Shawty had them Apple Bottom Jeans [Jeans] Boots with the fur [With the fur] The whole club was lookin at her She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Them baggy sweat pants and the Reeboks
    with the straps [With the straps] She turned around and gave that big booty a smack [Ayy] She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Read more: T-Pain - Apple Bottom Jeans Lyrics | MetroLyrics
  </p>

  <h5>THE COLLECTION PORTFOLIO</h5>

  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>

  <p>© Copyright 2049 Orange People Photography. All Rights UnReserved.
  </p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="">
  <p id="stickpoint">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut commodi rerum labore, dicta dolorem tempore. Labore animi obcaecati fugit, nesciunt doloremque dignissimos rerum consectetur asperiores, laboriosam iste architecto tempore vel inventore necessitatibus
    pariatur perspiciatis dolore iusto accusamus facere ipsam. Sint reiciendis quas ducimus minus sit ea quae, vero consectetur voluptates odio suscipit animi, et, eveniet vitae assumenda a excepturi dignissimos repudiandae. Libero rem tempora, qui veniam
    reprehenderit eum repellat delectus hic, blanditiis dolores assumenda, mollitia repudiandae necessitatibus voluptas officia eaque voluptate, ipsa facilis debitis totam aut eius atque consequuntur consequatur! Deleniti ullam magnam labore nihil unde
    vel assumenda iusto qui, illo sequi quidem magni quia accusantium, vero laboriosam dolore cupiditate libero natus dicta dolorem, rerum temporibus facilis debitis? Aperiam omnis distinctio fugiat animi ratione, dolorum, perferendis officiis itaque
    quaerat ut magni hic corrupti et iusto libero quia architecto. Itaque velit beatae accusamus necessitatibus inventore esse, odit sapiente voluptates alias iure quis voluptas tenetur possimus assumenda asperiores soluta perspiciatis, quisquam tempora,
    sint est doloremque. Quisquam quibusdam nisi quia, possimus earum nemo hic asperiores, architecto, assumenda in atque blanditiis iure amet, nobis obcaecati maiores sed quam reiciendis adipisci nam esse. Vitae ratione dolores ducimus culpa odit, ullam
    inventore ut minus, consequatur doloremque, dolore ea nesciunt repudiandae laborum provident nihil ex cum sed cumque. Possimus explicabo est quaerat aliquid reiciendis numquam. Non corporis nesciunt provident molestias earum quasi veritatis similique
    amet eum delectus doloremque repellat commodi reprehenderit numquam labore cum ullam, adipisci illo odio. Dolores, obcaecati praesentium neque magni optio, deleniti nemo. Error ratione doloremque corrupti neque ad perferendis qui laborum ipsam, ipsa
    nisi repudiandae vero cupiditate numquam tempore deleniti quod cumque, fuga magni sapiente voluptates. Cumque soluta, incidunt quibusdam perferendis est magni sequi fugit eius minus illum aspernatur quod blanditiis a architecto optio ipsa animi dolores
    porro, aliquam, error quisquam provident voluptatum esse ullam. In, quidem deserunt labore fugit? Quam rem consequatur et necessitatibus temporibus itaque, cupiditate consectetur molestias reiciendis natus voluptas facilis, nesciunt quibusdam architecto
    expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident.
    Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore
    quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi voluptatem inventore nihil eum ipsam consectetur, hic. Nobis eligendi facere porro accusamus architecto
    eveniet aut quam quis tempora excepturi, quae fuga facilis nihil. Necessitatibus quasi quae vero non voluptatibus ducimus dignissimos, temporibus molestias iusto nam! Ad odio fugiat veniam totam dolore, quis sapiente blanditiis, voluptatibus dolorem
    qui quod, quo explicabo quidem aliquid aliquam. Voluptas aperiam officia eius, porro veritatis non incidunt, quibusdam officiis, cupiditate illum tempora, nostrum itaque fugit nobis odio autem cumque possimus pariatur nesciunt ipsam. Ab laborum totam
    iure repellat dolorem aperiam veniam eum sapiente, vel ducimus obcaecati illum dolorum quibusdam nisi placeat.</p>
  <br>
</div>

Answer 1

这是你在找什么？

＆＃13;

body {
  /*background-color: #333;*/
  overflow-x: hidden;
  margin: 0px;
  background: #333;
}

.nav {
  list-style-type: none;
  overflow: hidden;
  display: inline-block;
  z-index: 2;
  position: absolute;
  border: solid;
  border-color: red;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.li {
  text-align: center;
}

.flex-container {
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
}

.flex-item {
  margin: 5px;
}

.resize-anchor {
  display: inline-block;
  height: auto;
  width: 300px;
}

.hplogo-a {
  display: inline-block;
  height: auto;
  width: 200px;
  min-width: 200px;
}

a {
  display: inline-block;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

a:hover {
  color: #D1946F;
  text-decoration: none;
}

a:link {
  color: #D1946F;
  text-decoration: none;
}

.nav-link {
  margin: 0px 10px 30px 10px;
  font-family: Calibri;
  font-size: 18px;
  font-style: normal;
  font-variant: normal;
  line-height: 26.4px;
  padding: 0px 10px 0px 10px;
  margin-top: 20px;
}

img {
  width: 100%;
}

p {
  color: white;
  text-align: center;
}

h5,
h3 {
  text-align: center;
  color: #D1946F;
}

＆＃13;

<body onscroll="myFunction()">
  <div id="navbar" class="li flex-container nav">
    <a class="nav-link flex-item col-md-2" href="#">PHOTOGRAPHER</a>
    <a class="nav-link flex-item col-md-2 " href="#">PORTFOLIO</a>
    <a class="hplogo-a flex-item col-md-2" href=""><img id="logo" src="http://www.kraftheinzcompany.com/pressroom/images/view/kraftlogolarge.jpg" alt=""></a>
    <a class="nav-link flex-item col-md-2" href="#">INVESTMENT + FAQ</a>
    <a class="nav-link flex-item col-md-2" href="#">BLOG</a>
  </div>



  <div class="container bottom PHOTOGRAPHER">


    <h3>THROUGH MY LENS... YOUR STORY.</h3>
    <p>Shawty had them Apple Bottom Jeans [Jeans] Boots with the fur [With the fur] The whole club was lookin at her She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Them baggy sweat pants and the Reeboks
      with the straps [With the straps] She turned around and gave that big booty a smack [Ayy] She hit the floor [She hit the floor] Next thing you know Shawty got low low low low low low low low Read more: T-Pain - Apple Bottom Jeans Lyrics | MetroLyrics
    </p>

    <h5>THE COLLECTION PORTFOLIO</h5>

    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>

    <p>© Copyright 2049 Orange People Photography. All Rights UnReserved.
    </p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Long_March_2D_launching_VRSS-1.jpg" alt="">
    <p id="stickpoint">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut commodi rerum labore, dicta dolorem tempore. Labore animi obcaecati fugit, nesciunt doloremque dignissimos rerum consectetur asperiores, laboriosam iste architecto tempore vel inventore necessitatibus
      pariatur perspiciatis dolore iusto accusamus facere ipsam. Sint reiciendis quas ducimus minus sit ea quae, vero consectetur voluptates odio suscipit animi, et, eveniet vitae assumenda a excepturi dignissimos repudiandae. Libero rem tempora, qui
      veniam reprehenderit eum repellat delectus hic, blanditiis dolores assumenda, mollitia repudiandae necessitatibus voluptas officia eaque voluptate, ipsa facilis debitis totam aut eius atque consequuntur consequatur! Deleniti ullam magnam labore
      nihil unde vel assumenda iusto qui, illo sequi quidem magni quia accusantium, vero laboriosam dolore cupiditate libero natus dicta dolorem, rerum temporibus facilis debitis? Aperiam omnis distinctio fugiat animi ratione, dolorum, perferendis officiis
      itaque quaerat ut magni hic corrupti et iusto libero quia architecto. Itaque velit beatae accusamus necessitatibus inventore esse, odit sapiente voluptates alias iure quis voluptas tenetur possimus assumenda asperiores soluta perspiciatis, quisquam
      tempora, sint est doloremque. Quisquam quibusdam nisi quia, possimus earum nemo hic asperiores, architecto, assumenda in atque blanditiis iure amet, nobis obcaecati maiores sed quam reiciendis adipisci nam esse. Vitae ratione dolores ducimus culpa
      odit, ullam inventore ut minus, consequatur doloremque, dolore ea nesciunt repudiandae laborum provident nihil ex cum sed cumque. Possimus explicabo est quaerat aliquid reiciendis numquam. Non corporis nesciunt provident molestias earum quasi veritatis
      similique amet eum delectus doloremque repellat commodi reprehenderit numquam labore cum ullam, adipisci illo odio. Dolores, obcaecati praesentium neque magni optio, deleniti nemo. Error ratione doloremque corrupti neque ad perferendis qui laborum
      ipsam, ipsa nisi repudiandae vero cupiditate numquam tempore deleniti quod cumque, fuga magni sapiente voluptates. Cumque soluta, incidunt quibusdam perferendis est magni sequi fugit eius minus illum aspernatur quod blanditiis a architecto optio
      ipsa animi dolores porro, aliquam, error quisquam provident voluptatum esse ullam. In, quidem deserunt labore fugit? Quam rem consequatur et necessitatibus temporibus itaque, cupiditate consectetur molestias reiciendis natus voluptas facilis, nesciunt
      quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur
      fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis
      corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi voluptatem inventore nihil eum ipsam consectetur, hic. Nobis eligendi facere
      porro accusamus architecto eveniet aut quam quis tempora excepturi, quae fuga facilis nihil. Necessitatibus quasi quae vero non voluptatibus ducimus dignisnesciunt quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid
      iure quibusdam quas, porro at vel ipsam eos temporibus expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit
      tempore provident eaque eligendi amet laudantium rerum cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam
      beatae alias totam, tempora necessitatibus asperiores perferendis illo. Nostrum quia eligendi volunesciunt quibusdam architecto expedita dolor accusantium omnis excepturi deleniti illum? Aliquid iure quibusdam quas, porro at vel ipsam eos temporibus
      expedita, reprehenderit tempore fuga voluptatum incidunt asperiores perspiciatis quasi molestiae aspernatur fugiat provident. Cum fugiat explicabo itaque fuga debitis doloribus ducimus velit tempore provident eaque eligendi amet laudantium rerum
      cumque, omnis sit, beatae, nesciunt non dolorum enim, perspiciatis quaerat nulla assumenda. Repellendus perspiciatis corporis labore quaerat et voluptate rerum, enim delectus doloremque ullam beatae alias totam, tempora necessitatibus asperiores
      perferendis illo. Nostrum quia eligendi volusimos, temporibus molestias iusto nam! Ad odio fugiat veniam totam dolore, quis sapiente blanditiis, voluptatibus dolorem qui quod, quo explicabo quidem aliquid aliquam. Voluptas aperiam officia eius,
      porro veritatis non incidunt, quibusdam officiis, cupiditate illum tempora, nostrum itaque fugit nobis odio autem cumque possimus pariatur nesciunt ipsam. Ab laborum totam iure repellat dolorem aperiam veniam eum sapiente, vel ducimus obcaecati
      illum dolorum quibusdam nisi placeat.</p>
    <br>
  </div>
  <script>
    var navbar = document.getElementById("navbar");
    var sticky = stickpoint.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
        navbar.classList.add("slide-in-top")
        navbar.classList.remove("nav")
      } else {
        navbar.classList.add("nav")
        navbar.classList.remove("sticky");
        navbar.classList.remove("slide-in-top")
      }
    }
  </script>
</body>

＆＃13;

对不起，我是初学者。这就是我的理解。

Sticky Navbar无法正常工作，代码在W3schools上运行

1 个答案: