[英]add class to sticky menu with fullpage.js
我正在嘗試使用fullpage.js在滾動菜單上添加一個類。
我想要的是#top-wrapper在第一部分/頁面加載時是正常的,然后向下滾動時會添加一類is-fixed。 如果您滾動回到第一部分,則該類為固定類將被刪除。
當前發生的情況是,隨着用戶向下滾動,添加了is-fixed類(這是正確的)。 但是,如果您向上滾動到第一部分,則不會刪除該類。
這是我的代碼:
var fullPageInstance = new fullpage('#page-wrapper', { anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage'], menu: '#side-menu', slidesNavigation: true, scrollingSpeed: 1000, parallax: true, parallaxOptions: { type: 'cover', percentage: 62, property: 'translate' }, onLeave: function(index, nextIndex, direction){ if (nextIndex != 1){ $('#top-wrapper').addClass('is-fixed'); } else { $('#top-wrapper').removeClass('is-fixed'); } } });
嘗試next.index
屬性
var fullPageInstance = new fullpage('#page-wrapper', { anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage'], menu: '#side-menu', slidesNavigation: true, scrollingSpeed: 1000, parallax: true, parallaxOptions: { type: 'cover', percentage: 62, property: 'translate' }, onLeave: function(index, next, direction) { if (next.index != 0) { $('#top-wrapper').addClass('is-fixed'); } else { $('#top-wrapper').removeClass('is-fixed'); } } });
.section:nth-child(odd) { background-color: green; } .section:nth-child(even) { background-color: red; } .is-fixed { color: #fff; position: fixed; z-index: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js" integrity="sha256-e13jRNqOX98m6UAwI/yZTpcDseJtA8s86yfFs4Sqrv8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/vendors/scrolloverflow.min.js" integrity="sha256-R7CttZ4L0/szai0hbFUlPDiRaEJmqYuvLhyAOr19vQg=" crossorigin="anonymous"></script> <div id="top-wrapper">top wrapper</div> <div id="page-wrapper"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
注意:在Full page
視圖中運行演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.