Question

我想创建两个导航栏，一个将出现在顶部，另一个将显示为内容标头，位于第一个导航条的下方，当我们滚动时，第一个导航条将消失而另一个将代替第一个导航条在下面的链接中给出，但我无法弄清楚

链接：https://gadgets.ndtv.com/samsung-galaxy-m30s-price-in-india-91066

Answer 1

我为您编写了此代码，希望您喜欢！附：我将代码编辑为较短的版本！

const header=document.querySelector(".header[handleScrolling]");
window.headerOffsetY=header.offsetTop+header.offsetHeight;

window.addEventListener("scroll", function(){
	document.querySelector("#scrollPoint").innerHTML=scrollY;
  scrollY>=headerOffsetY?header.classList.add("scrollEffects"):header.classList.remove("scrollEffects");
});

html, body{
  margin: 0; padding: 0; cursor: default; font-size: 14px;
  font-family: Arial, sans-serif;
}

.something{
  background-color: #eee;
  padding: 20px;
}

.header{
  position: relative;
  transition: all .2s;
  background-color: transparent;
}
.header .tab{
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 15px 12px;
  padding-bottom: 8px;
}
.header .tab:hover{
  color: #1848ff;
}
.header .tab.active{
  color: #1848ff;
  border-bottom: 4px solid #1848ff;
}
.header.scrollEffects{
  position: fixed !important;
  left: 0;
  top: 0;
  width: 100vw;
  box-shadow: 0 0 20px 10px rgba(0,0,0,.4);
  background-color: white;
}

<html>
  
   <body>
     
     <div class="something">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat repudiandae recusandae impedit eius in assumenda architecto at maiores! Incidunt commodi sapiente laborum, magnam voluptate libero blanditiis doloribus molestiae officiis nihil!
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat repudiandae recusandae impedit eius in assumenda architecto at maiores! Incidunt commodi sapiente laborum, magnam voluptate libero blanditiis doloribus molestiae officiis nihil!
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat repudiandae recusandae impedit eius in assumenda architecto at maiores! Incidunt commodi sapiente laborum, magnam voluptate libero blanditiis doloribus molestiae officiis nihil!
     </div>
     
     <div class="header" handleScrolling>
       
       <div class="tab active" onclick="alert(this.innerHTML)">Home
       </div><div class="tab" onclick="alert(this.innerHTML)">Reviews
       </div><div class="tab" onclick="alert(this.innerHTML)">Price
       </div><div class="tab" onclick="alert(this.innerHTML)">Videos
       </div><div class="tab" id="scrollPoint">0
       </div>
       
     </div>
     
     <div class="something">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quae facere inventore impedit. Perspiciatis illo eaque numquam, soluta atque omnis corrupti unde at consequatur harum. Quia natus tempore ullam reprehenderit?
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus in adipisci doloremque assumenda molestiae illo debitis numquam soluta iure voluptate dignissimos ab eius, magnam, quis quos repudiandae suscipit voluptatum voluptatem.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam nesciunt veniam, corporis, quae fugit ratione, eaque aspernatur quasi laboriosam quam dolorem nemo, voluptatum harum! Illum, culpa molestiae aspernatur at dignissimos.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolorum, non molestiae voluptatibus, eligendi consequuntur, sint amet, praesentium odit maiores soluta velit porro debitis rem itaque tempora! Itaque, iste, nulla.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore fugit necessitatibus vel ipsa quia obcaecati nobis officia, eaque est voluptates illum unde temporibus, cumque excepturi harum eius ducimus veritatis. Sapiente.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptate voluptates doloremque recusandae quae, adipisci iusto nisi ducimus eum illum maxime et, optio perspiciatis? Accusantium nam delectus libero officiis, officia.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt omnis error quasi aliquid soluta nesciunt, rerum aspernatur fugit cupiditate tenetur dolor! Ad deserunt, repellat doloribus distinctio, molestiae nemo fuga officiis.
     </div>
     
   </body>
  
</html>

如何创建一个双导航栏，该导航栏在链接中显示为滚动条

1 个答案: