Adding hidden elements to a sticky menu that appear on scroll

Question

I have a top nav and a sticky sub nav. When a user scrolls part way down the page, the sticky nav is the top nav. You can see a working example of what I am trying to do here - https://www.vidyard.com/careers/

My problem is getting the logo and login button to be hidden in the sticky nav when the user is at the top of the page, and for them to appear when they have scrolled to the sticky nav (again, that working example is what I am trying to get working).

For some reason every time I add the logo/button, the sticky nav stops working properly, or makes it appear part way off the page, and I'm struggling with the markup of how to make that work.

I know they have to be hidden until the sticky menu is applied - but even when i apply that rule to them, the menu stops working. So how do i add the logo and button to this menu without it causing it to not work right?

  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

I would suggest using a class name for your menu toggle instead of adding inline styles. This will give you much more control over what is displayed and hidden. See my changes below. You can then add the image to the HTML and show/hide based on the class name.

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