Kristy Kristy - 21 days ago 7
CSS Question

wordpress: sticky menu not sticking upon scroll until later

I am using a flat theme (Cordillera) on my new blog set up and had help adjusting the homepage full screen banner to a smaller size (you can see that post and solution in this thread).

The solution worked great but I am now noticing that the sticky menu is not sticking as soon as it hits the top of the page but will jump on board upon scrolling further down (hit jumps on about the blog section for me on chrome). I am assuming that this issue has something to do with the banner resize but to be honest, I'm not 100% sure on that.

I'm not sure what code to pull out for examination, this is my first usage of a flat theme but can if someone tells me what to look for.

Thanks again for any and all help!

Answer Source

The code to control your sticky header is in the script file cordillera.js. The code applies the sticky header at exactly the height of the viewport, which is the variable winHeight:

var winHeight=$(window).height();  

If you set winHeight to be a custom number, it will kick in at that point. Here is the code from that script:

   //fixed header
   $(window).scroll(function(){
  if( $(".top-banner").length ){
   var winHeight=$(window).height();          
    }
    else{
        var winHeight = 0;
        }
   if( $("body.admin-bar").length){
       if( $(window).width() < 765) {
               stickyTop = 46;

           } else {
               stickyTop = 32;
           }
     }
     else{
         stickyTop = 0;
         }
         $('.sticky-header').css('top',stickyTop);
                   var scrollTop = $(window).scrollTop(); 
               if ( scrollTop > winHeight + stickyTop ) { 
               if( !$(".top-banner").length ){
                   $('header#header').hide();
               }
                   $('.sticky-header').show();
                   } else {
                       if( !$(".top-banner").length ){
                       $('header#header').show(); 
                       }
                       $('.sticky-header').hide();
                   }   
    });