Exploring a sticky navigation feature using jQuery. Click the link below to see the navigation and add to cart button in action:
The navigation sticks to the top along with the add to cart button (which is not a child element of the navigation but may be appended as the last child) when scrolling down.
As you scroll up, the navigation returns to its original position while the add to cart button remains in place.
To handle this functionality, here is the code snippet:
<script>
jQuery.noConflict();
jQuery(window).scroll(function() {
var height = jQuery(window).scrollTop();
if(height > 150) {
jQuery('.header-minicart').appendTo('#custommenu');
jQuery('#header-nav').addClass('fixed-menu');
jQuery('.header-minicart').addClass('fixed-minicart');
}else{
/*Enter your code for the up-scroll behavior here */
jQuery('#header-nav').removeClass('fixed-menu');
jQuery('.header-minicart').removeClass('fixed-minicart');
}
});
</script>
<style>
.fixed-menu{
position: fixed;
left: 0px;
top: 0px;
z-index: 9999999999;
width: 100% !important;
}
.fixed-minicart{
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
This is the HTML code for the add to cart button:
<div class="header-minicart">
<a href="-" data-target-element="#header-cart" class="skip-link skip-cart no-count">
<span class="icon"></span>
<span class="label">Cart</span>
<span class="count">0</span>
</a>
</div>
<div id="header-nav" class="skip-content">
<div class="nav-container" id="wp-nav-container">
<div id="custommenu" class="" style=""><div class="menu">
<div class="parentMenu menu0">
<a href="-">
<span>Home</span>
</a>
</div>
...
<div class="clearBoth"></div></div>
</div>
</div>
You can reposition the add to cart button by inserting it before the .clearBoth element.