jump after header top bar

Question

My site has a top bar and a nav bar with the site menu. Strangely enough, after a few pixels of scrolling down, the content part of the site jumps up. I think this wasn't doing this initially, but I must have changed something in the template settings to start this behaviour. The jumping happens on desktop and mobile alike. What could be the reason for it?

[EDIT: the link to the site was removed, because it became irrelevant for this question after the website experienced an overhaul. As the portion of the website pertinent to this question could not clearly be identified, none of it can be posted here in a sensible fashion. This question is essentially a dead end, but I can't remove it myself. If you can extract value out of the answer kindly provided, you're welcome to do so. Otherwise, I'm sorry about this dead-end-situation. Good luck with your jumpy header navigation or top bar stuff.]

Do I need to change/add something in the CSS? I found stuff about content jumping, but it's all about third party content being loaded later, AJAX modules, and so on. My issue here is different, as the site is all loaded, but as soon as I scroll down a few pixels, the content jumps up quite an amount.

Answer 1

If you put on the browser devtools on your site, then in the Inspector you can see that as you scroll down there is a CSS class header-sticky which is added to your <header id="sp-header> element.

This has the effect of changing the header from being position:relative to being position:fixed. The effect of making it position:fixed is that the element is removed out of the flow of the page. So before (when it was position:relative) it was occupying space on the page, but afterwards it occupies no space, and the content which was below it now jumps up to occupy the space which is now vacant.

As regards fixing the problem, that's something within your template. However, I did have a look at a js file main.js within your template folder structure, and within a function $(window).on('scroll', function(){ from line 199 onwards there is some code commented out:

        if( postition === 'top' ){
            // var sticky = $('.header-sticky');
            // if( sticky.length > 0 ){
            //     sticky.css({ top: scrollBar.height() })
            // }else{
            //     sticky.css({ top: 0 })
            // }
        }

It might have been commented out by accident, so you could try uncommenting those lines and see if that works.

UPDATE

You should be able to fix things by editing the main.js file in something like the following way. Around line 19 there is code which sets/removes the header-sticky class:

if (scrollTop > stickyHeaderTop) {
    header.addClass('header-sticky');
} else {
    if (header.hasClass('header-sticky')) {
        header.removeClass('header-sticky');
    }
}

You can edit this and set/remove a class at the same time on a subsequent html element eg <section id="sp-section-1"> which adds the margin.

if (scrollTop > stickyHeaderTop) {
    header.addClass('header-sticky');
    $('#sp-section-1').addClass('add-margin');
} else {
    if (header.hasClass('header-sticky')) {
        header.removeClass('header-sticky');
        $('#sp-section-1').removeClass('add-margin');
    }
}

And then in your CSS file:

#sp-section-1.add-margin {
  margin-top: 60px;
}

Obviously this is hard-coding values, but it should hopefully be enough to get you down the line of finding the best solution.