Give calculated jQuery value / variable to CSS class

Question

I got the following navbar. What I want it to do is:

1. Come into view when you scroll down
2. Leave the view when scrolling up again (to a defined amount)
3. "Close" the navbar with the arrow to make it smaller
4. "Reopen" the navbar after it's "closed"
5. At any time I would still like the navbar to hide when scrolling to the top. Doesn't matter if it's extended or compressed

That's not working, because my code to toggle the navbar will set inline values for top which is needed in class to hide it when scrolling up

So the real question besides what's wrong with my code is:

Is there any way to give my calculated height into CSS? Or don't set the styles inline but rather define a new class or something and give that class the values?

So I can still have some order in CSS and the hide on scroll up won't get overridden by the inline 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

Its done, All you need to do is, Hide and show that menu with display and not with position, in this way, you not need to worry about the position and the state of the menu items

 // 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>