javascript - 将隐藏元素添加到出现在滚动条上的粘性菜单

Question

我有一个顶部导航和一个粘性子导航。当用户向下滚动页面的一部分时，粘性导航就是顶部导航。你可以在这里看到我正在尝试做的工作示例 - https://www.vidyard.com/careers/

我的问题是当用户位于页面顶部时让 Logo 和登录按钮隐藏在粘性导航中，并在他们滚动到粘性导航时显示它们(同样，该工作示例是我正在努力工作)。

出于某种原因，每次我添加 Logo /按钮时，粘性导航都会停止正常工作，或者使其出现在页面的一部分，我正在努力研究如何使其工作的标记。

我知道在应用粘性菜单之前必须隐藏它们 - 但即使我对它们应用该规则，菜单也会停止工作。那么，如何将 Logo 和按钮添加到此菜单而不导致它无法正常工作？

 var menu = document.querySelector('.menu-t')
 var menuPosition = menu.getBoundingClientRect().top;
 window.addEventListener('scroll', function() {
   if (window.pageYOffset >= menuPosition) {
     menu.style.position = 'fixed';
     menu.style.top = '0px';
   } else {
     menu.style.position = 'static';
     menu.style.top = '';
   }
 });

.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.page-section.page-section-center {
  align-content: center;
  text-align: center;
}
.menu-t {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFF;
  z-index: 1000;
  border-bottom: 1px #eee dotted;
}
.menu-t li {
  display: inline-block;
  text-align: center;
  padding: 20px;
  text-transform: uppercase;
  font-size: 14px;
}
.menu-t a {
  display: block;
  padding: 10px 0;
  color: #32404E !important;
  -webkit-transition: color ease 0.3s;
  -o-transition: color ease 0.3s;
  transition: color ease 0.3s;
}
.menu-t a:hover {
  color: #2db2e9 !important;
}

<section>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</section>
<section class="page-section page-section-white page-section-center hidden-xs hidden-sm">
 <div class="row">
   <div class="col-md-4">
     Logo image here
     </div>
   <div class="col-md-4">
      <ul class="menu-t">
    <li>
      <a href="#" class="text-thick">What Is</a>
    </li>
    <li>
      <a href="#" class="text-thick">How We Help</a>
    </li>
    <li>
      <a href="#testimonials" class="text-thick">Testimonials</a>
    </li>
  </ul>
     </div>
   <div class="col-md-4">
     Button here
     </div>
   </div>
</section>
<section>
  <br/>
  <br/>
  <br/>
    <br/>
   <br/>
   <br/>
    <br/>
   <br/>
   <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</section>

Answer 1

我建议为您的菜单切换使用类名，而不是添加内联样式。这将使您更好地控制显示和隐藏的内容。请参阅下面的更改。然后，您可以将图像添加到 HTML 并根据类名显示/隐藏。

var menu = document.querySelector('.menu-t');
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
  if (window.pageYOffset >= menuPosition) {
     menu.className = 'menu-t fixed';
  } else {
     menu.className = 'menu-t';
  }
});

.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.page-section.page-section-center {
  align-content: center;
  text-align: center;
}
.menu-t {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFF;
  z-index: 1000;
  border-bottom: 1px #eee dotted;
  position: static;
  top: auto;
}
.menu-t li {
  display: inline-block;
  text-align: center;
  padding: 20px;
  text-transform: uppercase;
  font-size: 14px;
}
.menu-t a {
  display: block;
  padding: 10px 0;
  color: #32404E !important;
  -webkit-transition: color ease 0.3s;
  -o-transition: color ease 0.3s;
  transition: color ease 0.3s;
}
.menu-t a:hover {
  color: #2db2e9 !important;
}
.menu-t.fixed {
  position: fixed;
  top: 0;
}