How to have a logo appear in sticky menu on scroll

Question

I have a sticky sub-menu. When i scroll to a section on the page, this menu sticks to the top. However, I would like the logo to appear on scroll and be hidden when the sticky menu is not at the top.How would I accomplish that? Here is an example of what i am trying to do (you need to scroll part way down the page to see the sticky menu) - https://www.vidyard.com/platform/viewedit/

The logo and the 'get a demo' button are what i am trying to achieve.

 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 class="page-section"> <br/> <br/> <br/> <br/> </section> <section class="page-section page-section-center hidden-xs hidden-sm"> <ul class="menu-t"> <li>ITEM</li> <li> <a href="#" class="text-thick">What Is</a> </li> <li> <a href="#" class="text-thick">How</a> </li> <li> <a href="#" class="text-thick">You're In Good Company</a> </li> <li>ITEM</li> </ul> </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/>

Answer 1

Try like this.

Create an img element within li element with display hidden at the the start and hide/show it on scroll.

 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'; menu.firstElementChild.firstElementChild.style.display = "block"; } else { menu.style.position = 'static'; menu.style.top = ''; menu.firstElementChild.firstElementChild.style.display = "none"; } });

 .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; } .menu-t li img{ display: none; }

 <section class="page-section"> <br/> <br/> <br/> <br/> </section> <section class="page-section page-section-center hidden-xs hidden-sm"> <ul class="menu-t"> <li> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRJfyp7Gqe9jDGcVUgJIq0iTOOyzv6MkOthkXkAOzvqiiBPHceh"/> </li> <li>ITEM</li> <li> <a href="#" class="text-thick">What Is</a> </li> <li> <a href="#" class="text-thick">How</a> </li> <li> <a href="#" class="text-thick">You're In Good Company</a> </li> <li>ITEM</li> </ul> </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/>

Answer 2

The logo in your example is there in the navbar the whole time. They use visibility: hidden; to begin, and then visibility: visible; when the scrollbar sticks to the top.