Programing with WordPress is highly flexible and customizable, but sometimes, your theme may not be able to give every bit you want. Sticky menu and sticky side bar may be one of these.

Enable sticky menu

 

Step 1. Find the CSS ID of the menu element.

By default, this ID can be site-navigation, nav-menu or other name depending on the theme you are using. To find this, right click the navigation menu and find the parent’s ID. My menu IT in my theme is sm_menu.

Step 2. Mark the element with extra class.

We will add a php code in wordpress to add additional class ff-sticky to the menu, so we can change the style of the sticky menu. Open the function.php file, add below code within “<?php” and “?>”:

function sticky_nav_menu(){
    ?>
    <script>
        window.onscroll = function() {myFunction()};
        // Get the header
        var header = document.getElementById( "sm_menu" );
        // Get the offset position of the navbar
        var sticky = header.offsetTop;
        // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function myFunction() {
          if ( window.pageYOffset > 40 ) { 
            header.classList.add( "ff-sticky" ); 
          } else {
            setTimeout(function(){
               header.classList.remove( "ff-sticky" ); 
            }, 100); 
          }
        }
    </script>
    <?php
}
add_action('wp_footer', 'sticky_nav_menu');

click Update File. Now you can add css code for this such as:

div#sm_menu.ff-sticky{
  margin-top:70px;
  position:fixed;
  top:0;
  transition-duration:1000;
  background-color:#fff;
}

 

Enable sticky sidebar

A sticky sidebar can be helpful, such as when a filter or shopping cart in it.

A sidebar sticky can be done similar to the navigation menu, the potential issue is overlay when scroll to the bottom.

 

To overcome this issue, we can add a condition when the sidebar become unsticky when scroll down. Sadly, there is no pageYoffset from bottom, so we need a bit of maths for this. let’s say, it become unsticky when 280px above the bottom.

Here in my scenario the height of nav-menu plus bread crumb is about 300px, so the sticky condition is:

if (( window.pageYOffset > 300 ) &&((window.innerHeight + window.scrollY + 280) <= document.body.offsetHeight))

The whole code is:

function sticky_sidebar(){
    ?>
    <script>
        window.onscroll = function() {myFunction()};
        // Get the header
        var sidebar= document.getElementById( "man_sidebar" );
        // Get the offset position of the navbar
        var sticky = header.offsetTop;
        // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function myFunction() {
          if if (( window.pageYOffset > 300 ) &&((window.innerHeight + window.scrollY + 280) <= document.body.offsetHeight)) { 
            sidebar.classList.add( "sidebar-sticky" ); 
          } else {
            setTimeout(function(){
               sidebar.classList.remove( "sidebar-sticky" ); 
            }, 100); 
          }
        }
    </script>
    <?php
}
add_action('wp_footer', 'sticky_sidebar');

Respectively, I will add the css for the sticky_sidebar as well:

 

div.man_sidebar.sidebar-sticky{
position:fixed;
top:80px;
transition-duration:0.5s;
transition-delay:0.2s;
}