Issues with WordPress site – theme ‘jitters’ when scrolling?

2 comments

1. The reason its jumping is because when the header is fixed (absolute) the next element ‘#main-content’ is being positioned at the top of the page, removing the need for scroll bars.

   When you’re not scrolled below the top of the header it removes the ‘fixed-header’ class which resets it back to the way it was originally – hence the jump.

   The fix using CSS:

   .fixed-header + #main-content {
       margin-top: 183px; /* Height of the header */
   }
   

   I’m pretty sure you could do this all in CSS though if you just added the .fixed-header class from the start making it position: absolute; top: 0; and removed the javascript.

   Log in to Reply

2. I believe that your problems centre around this bit of JavaScript in non-mobile.js;

   jQuery(function($){
       $(document).ready(function(){   
           var stickyHeaderTop = $('#masthead-wrap').offset().top;
           $(window).scroll(function(){
               if ( $(window).scrollTop() > stickyHeaderTop ) {
                   $('#masthead-wrap').addClass( 'fixed-header').css({position: 'fixed', top: '0px'});
               } else {
                   $('#masthead-wrap').removeClass( 'fixed-header').css({position: 'static', top: '0px'});
           }
           }); 
       });
   });
   

   First of all, your opening line of jQuery isn’t necessary. It should be just;

   jQuery(document).ready(function($){
   

   That will fire the jQuery on document load and let you use $ without conflict.

   The next most obvious thing is this;

   $('#masthead-wrap').addClass( 'fixed-header').css({position: 'fixed', top: '0px'});
   

   You should probably either add the class and then style with normal CSS OR add inline CSS rather than do both.

   It’s hard to see what you’re trying to achieve with the header, so I can’t really suggest alternative code at the mo, but it looks like you just need the header to remain fixed to the top of the page?

   If so you can do that without JavaScript, and with;

   #masthead-wrap{    
       position: fixed;
   }
   

   And then just add a bit of padding to bump your content down.

   Log in to Reply