將隱藏的元素添加到滾動顯示的即時貼菜單

Question

我有一個頂級導航和一個粘性子導航。 當用戶向下滾動頁面一部分時，粘性導航即為頂部導航。 您可以在這里看到我正在嘗試做的工作示例-https: //www.vidyard.com/careers/

我的問題是，當用戶位於頁面頂部時，將徽標和登錄按鈕隱藏在粘性導航中，讓他們在滾動到粘性導航時出現（再次，該工作示例就是我努力工作）。

出於某種原因，每次我添加徽標/按鈕時，粘性導航都會停止正常工作，或者使其看起來部分偏離頁面，並且我正在為如何使其工作而苦苦掙扎。

我知道在應用粘性菜單之前必須將它們隱藏起來-但是即使我將規則應用到它們上，菜單也會停止工作。 那么，如何在不使徽標和按鈕無法正常工作的情況下將徽標和按鈕添加到此菜單？

  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;
}