將計算的 jQuery 值/變量提供給 CSS class

Question

我得到了以下導航欄。 我想要它做的是：

1. 向下滾動時進入視野
2. 再次向上滾動時離開視圖（達到定義的量）
3. 用箭頭“關閉”導航欄以使其更小
4. 導航欄“關閉”后“重新打開”
5. 在任何時候，我仍然希望導航欄在滾動到頂部時隱藏。 不管是擴展還是壓縮

這不起作用，因為我切換導航欄的代碼將為top設置內聯值，這是 class 在向上滾動時隱藏它所必需的

所以除了我的代碼有什么問題之外，真正的問題是：

有什么方法可以將我計算出的高度輸入 CSS？ 或者不要設置 styles 內聯，而是定義一個新的 class 或其他東西，然后給 class 值？

所以我仍然可以在 CSS 中有一些訂單，並且向上滾動時的隱藏不會被內聯 styles 覆蓋。

 // Sticky Header / Appear when scrolled to XY $(window).scroll(function() { var header_sticky = $('.header-sticky'); if ($(this).scrollTop() > 250) { header_sticky.addClass('fixed'); } else { header_sticky.removeClass('fixed'); } }); // Hide / Show Navbar $(function() { $('#nav_toggle').on('click', function() { toggleNav(); }); }); function toggleNav() { let navHeight = $('.header-sticky.toggleable').height(); let anchorHeight = $('#nav_toggle').height(); let toggleHeight = navHeight - anchorHeight; if ($('#nav_toggle').parent().hasClass('nav_toggled')) { $('#nav_toggle').parent().css('top', 0); $('#nav_toggle').parent().removeClass('nav_toggled') $('#nav_toggle').html('<i class="fas fa-angle-down"></i>') } else { $('#nav_toggle').parent().addClass('nav_toggled') $('#nav_toggle').parent().css('top', -toggleHeight); $('#nav_toggle').html('<i class="fas fa-angle-up"></i>') } }

 /* Nav Styling */.nav { width: 100vw; padding: 0 10vw; position: fixed; background: #fefefe; z-index: 8; left: 0; right: 0; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2); }.nav ul { list-style-type: none; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; width: 100%; }.nav ul li { padding: 0.5rem 1rem; } /* Toggle Styling */ #nav_toggle { font-size: 1.5rem; text-align: center; width: 2rem; height: 100%; display: block; margin: 0 auto; } /* Sticky Header CSS */.header-sticky { position: fixed; z-index: 1000; top: -250px; transition: all ease-in-out.25s; }.header-sticky.fixed { top: 0; } /* Some height so it's scrollable */.for_some_height { height: 200vw; width: 100%; z-index: -1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> <div class="nav header-sticky toggleable"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <a href="javascript:void(0)" id="nav_toggle"><i class="fas fa-angle-down"></i></a> </div> <div class="for_some_height"></div>

Answer 1

它完成了，你需要做的就是，隱藏和顯示帶有顯示而不是 position 的菜單，這樣你就不用擔心菜單項的 position 和 state

 // Sticky Header / Appear when scrolled to XY $(window).scroll(function() { var header_sticky = $('.header-sticky'); if ($(this).scrollTop() > 250) { header_sticky.addClass('fixed'); } else { header_sticky.removeClass('fixed'); } }); // Hide / Show Navbar $(function() { $('#nav_toggle').on('click', function() { $(this).prev('ul').slideToggle(); $(this).toggleClass('closed'); if($('#nav_toggle').hasClass('closed')){ $('#nav_toggle').html('<i class="fas fa-angle-up"></i>'); }else { $('#nav_toggle').html('<i class="fas fa-angle-down"></i>'); } }); });

 /* Nav Styling */.nav { width: 100vw; padding: 0 10vw; position: fixed; background: #fefefe; z-index: 8; left: 0; right: 0; box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.2); }.nav ul { list-style-type: none; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; width: 100%; }.nav ul li { padding: 0.5rem 1rem; } /* Toggle Styling */ #nav_toggle { font-size: 1.5rem; text-align: center; width: 2rem; height: 100%; display: block; margin: 0 auto; } /* Sticky Header CSS */.header-sticky { position: fixed; z-index: 1000; top: -250px; transition: all ease-in-out.25s; }.header-sticky.fixed { top: 0; } /* Some height so it's scrollable */.for_some_height { height: 200vw; width: 100%; z-index: -1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> <div class="nav header-sticky toggleable"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <a href="javascript:void(0)" id="nav_toggle"><i class="fas fa-angle-down"></i></a> </div> <div class="for_some_height"></div>