Блог

Главная - Вопросы по программированию - Липкая панель навигации, которая начинается на второй странице

Липкая панель навигации, которая начинается на второй странице

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать липкую панель навигации для своего веб-сайта. Я хочу, чтобы панель навигации оставалась фиксированной вверху при прокрутке вниз. Однако, поскольку панель навигации начинается только на второй странице (синяя страница), она должна отображаться только при прокрутке вниз со второй страницы. Просто панель навигации не должна отображаться вообще в оранжевом разделе.

Я попытался добавить это #firstpage .topnav в css. Несмотря на то, что при этом панель навигации остается вверху, она отображается в оранжевом разделе. Панель навигации должна начинаться только на второй странице:

   position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

Минимальный воспроизводимый пример:

 #about {
  background-color: blue;
  width: 100%;
  height: 100vh;
}
  
#frontslider {
  width: 100%;
  height: 100vh;
  background-color: orange;
}
    
    
#frontslider p {
  text-align: center;
  padding: 80px;
  color: #dfba57;
  font-size: 30px;
}


#firstpage .topnav {
  overflow: hidden;
  background-color: white;
}

#firstpage .topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 25px 16px;
  text-decoration: none;
  font-size: 10px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

#firstpage .topnav a:hover {
  color: #d7b916;
}
    
#firstpage .topnav a.active {
  color: #d7b916;
}

#services {
  width: 100%;
  height: 100vh;
  background-color: green;
}  
 <body>

  <section id="frontslider">
    <p>MY WEBSITE</p>
  </section>


  <section id="firstpage">
    <div class="topnav d-flex justify-content-center">
      <a class="active" href="#about">ABOUT US</a>
      <a href="#services">SERVICES</a>
      <a href="#portfolio">GALLERY</a>
      <a href="#team">LOCATION</a>
      <a href="#faq">FAQ</a>
      <a href="#contact">CONTACT US</a>
    </div>
  </section>


  <section id="about">

  </section>


  <section id="services">

  </section>

Ответ №1:

Вот решение только для CSS!

Эта страница может быть полезной: https://www.w3schools.com/howto/howto_css_sticky_element.asp .

Вы можете использовать position: sticky панель навигации и вытащить ее из раздела firstpage в родительский div, содержащий все остальные разделы.

https://jsfiddle.net/e4k8rjx9/12/

 #about {
  background-color: blue;
  width: 100%;
  height: 100vh;
}
  
#frontslider {
  width: 100%;
  height: 100vh;
  background-color: orange;
}
    
    
#frontslider p {
  text-align: center;
  padding: 80px;
  color: #dfba57;
  font-size: 30px;
}


#pages .topnav {
  overflow: hidden;
  background-color: white;
  position: sticky;
  top: 0;
}

#pages .topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 25px 16px;
  text-decoration: none;
  font-size: 10px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

#pages .topnav a:hover {
  color: #d7b916;
}
    
#pages .topnav a.active {
  color: #d7b916;
}

#services {
  width: 100%;
  height: 100vh;
  background-color: green;
}  
 <body>

  <section id="frontslider">
    <p>MY WEBSITE</p>
  </section>

  <div id="pages">
    <div class="topnav d-flex justify-content-center">
        <a class="active" href="#about">ABOUT US</a>
        <a href="#services">SERVICES</a>
        <a href="#portfolio">GALLERY</a>
        <a href="#team">LOCATION</a>
        <a href="#faq">FAQ</a>
        <a href="#contact">CONTACT US</a>
    </div>
    <section id="firstpage">
    
    </section>


    <section id="about">

    </section>


    <section id="services">

    </section>
  </div>
</body>

Ответ №2:

Пожалуйста, проверьте это.

 <!DOCTYPE html>

<html>
  <head>
    <title>Story Time</title>
    <style>
      #about {
        background-color: blue;
        width: 100%;
        height: 100vh;
      }

      #frontslider {
        width: 100%;
        height: 100vh;
        background-color: orange;
      }

      #frontslider p {
        text-align: center;
        padding: 80px;
        color: #dfba57;
        font-size: 30px;
      }

      #firstpage .topnav {
        overflow: hidden;
        background-color: white;
      }

      #firstpage .topnav a {
        float: left;
        color: black;
        text-align: center;
        padding: 25px 16px;
        text-decoration: none;
        font-size: 10px;
        font-family: "Raleway", sans-serif;
        font-weight: 500;
      }

      #firstpage .topnav a:hover {
        color: #d7b916;
      }

      #firstpage .topnav a.active {
        color: #d7b916;
      }

      #services {
        width: 100%;
        height: 100vh;
        background-color: green;
      }
      .fixed {
        position: fixed;
        width: 100%;
        top: 0;
      }
    </style>
  </head>

  <body>
    <section id="frontslider">
      <p>MY WEBSITE</p>
    </section>

    <section id="firstpage">
      <div class="topnav d-flex justify-content-center">
        <a class="active" href="#about">ABOUT US</a>
        <a href="#services">SERVICES</a>
        <a href="#portfolio">GALLERY</a>
        <a href="#team">LOCATION</a>
        <a href="#faq">FAQ</a>
        <a href="#contact">CONTACT US</a>
      </div>
    </section>

    <section id="about"></section>

    <section id="services"></section>

    <script>
      let header = document.querySelector(".topnav");
      let storData = header.offsetTop;
      window.addEventListener("scroll", function (e) {
        if (window.scrollY >= storData) {
          header.classList.add("fixed");
        } else {
          header.classList.remove("fixed");
        }
      });
    </script>
  </body>
</html>

Ответ №3:

Вы можете обработать событие прокрутки, и когда смещение окна больше, чем topOffset элемента topnav, вам нужно исправить его. И удалите ее, когда она станет меньше.

 window.onscroll = function() {scrollHandler()};

var topnav= document.getElementById("topnav");
var topNavOffset= topnav.offsetTop;

function scrollHandler() {
  if (window.pageYOffset >= topNavOffset) {
    topnav.classList.add("fixed")
  } else {
    topnav.classList.remove("fixed");
  }
}

а для фиксированного класса css вам нужно установить верхнюю часть и ширину, поскольку элемент становится фиксированным элементом, чтобы убедиться, что он находится сверху и заполняет всю ширину.

 .fixed {
  position: fixed;
  top: 0;
  width: 100%;
}