Question

您好，我一直在尝试使用香草javascript创建粘性导航栏，因此当我滚动徽标时。 navbar会保持粘性，但不会成功，因为存在一些我无法修复的错误，如果有人可以看一下下面的代码来帮助我，谢谢您。 >

let nav = document.querySelector('.nabar');
let topToNav = nav.offsetTop;
let logo = document.querySelector('.logo');

function stickyNav () {
    if(window.scrollY >= topToNav) {
        logo.style.paddingTop = nav.offsetHeight + 'px';
        logo.classList.add('fixed');
    } else {
        logo.style.paddingTop = 0;
        logo.classList.remove('fixed');
    }
}
window.addEventListener('scroll', stickyNav);

.nabar{
  background-color: darkslategrey;
  padding: 15px 0px;
}
.nabar li{
  list-style: none;
  display: inline;
  font-size: 20px;
  padding: 0px 15px 0px 15px;
}
.nabar ul {
  text-align: center;
}
.nabar a:hover {
  text-decoration:none;
  color: white;
}
.nabar a{
  color: white;
}
.fixed .nabar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  box-shadow: 0 3px 6px rgba(black, .3);
}
.test{
  height: 600px;
  background: yellow;
  }
.test2{
  height: 609px;
  background: green;
  }
.logo{
  height: 100px;
}
.logoimg{
  width: 240px;
  height: 100px;
  margin: 0 auto;
  display: block;
}

<div class="logo">
      <img class="logoimg" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1648.png">
    </div>
    <div class="nabar">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
      <div class="test">
        </div>
          <div class="test2">
        </div>

Answer 1

尝试包装您的导航和徽标，以将其粘贴在下面的代码中

为了保持导航宽度，请改用position:sticky; 的position: fixed;

window.onscroll = function() {stickyNav()};
var mynavbar = document.getElementById("my-navbar");
var sticky = mynavbar.offsetTop;
function stickyNav() {
  if (window.pageYOffset > sticky) {
    mynavbar.classList.add("fixed");
  } else {
    mynavbar.classList.remove("fixed");
  }
}

.nabar{
  background-color: darkslategrey;
  padding: 15px 0px;
}
.nabar li{
  list-style: none;
  display: inline;
  font-size: 20px;
  padding: 0px 15px 0px 15px;
}
.nabar ul {
  text-align: center;
}
.nabar a:hover {
  text-decoration:none;
  color: white;
}
.nabar a{
  color: white;
}
.fixed {
  position: sticky;
  width: 100%;
  top: 0;
  left: 0;
  box-shadow: 0 3px 6px rgba(black, .3);
}
.test{
  height: 800px;
  background: yellow;
  }
.logo{
  height: 100px;
}
.logoimg{
  width: 240px;
  height: 100px;
  margin: 0 auto;
  display: block;

<div class="logo">
        <img class="logoimg" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1648.png">
  </div>

  <div id="my-navbar" class="nabar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
  </div>
<div class="test"></div>

检查codepen

Answer 2

css .fixed .primary-nav之间有一个空格是指此元素：

<div class="fixed">
    <div class="primary-nav" />
</div>

因此下面的css在您的上下文中不会做任何事情。

.fixed .primary-nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  box-shadow: 0 3px 6px rgba(black, .3);
}

取出.primary-nav部分，您甚至没有该类的元素...

带有JS的粘性导航栏

2 个答案: