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

http://rain-onlands.co.uk/

Could anyone explain why when scrolling on this site it jitters on certain pages?

Read More

I can see a few changes to the theme through a child theme, and allot of ‘!important’ being used.

But have no idea why the scrolls like that?

Related posts

Leave a Reply

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.

  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.