如何在滾動時的粘性菜單中顯示徽標

Question

我有一個粘性子菜單。 當我滾動到頁面上的某個部分時，此菜單會固定在頂部。 但是，我希望徽標出現在滾動條上並在粘性菜單不在頂部時隱藏。我將如何實現？ 這是我正在嘗試做的一個示例（您需要向下滾動頁面以查看粘性菜單） - https://www.vidyard.com/platform/viewedit/

徽標和“獲取演示”按鈕是我想要實現的目標。

 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

像這樣嘗試。

在 li 元素中創建一個 img 元素，在開始時隱藏顯示並在滾動時隱藏/顯示它。

 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

您示例中的徽標一直在導航欄中。 他們使用visibility: hidden; 開始，然后visibility: visible; 當滾動條粘在頂部時。