0

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.

2

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.

| improve this answer | |
  • Thanks for the thorough explanation and problem spotting! I will have a look at the relevant files as soon as I can and try to solve the issues. – thymaro Sep 19 at 16:32
  • Alright, that didn't work. I even corrected postition to position, but that didn't solve it, unfortunately. I'll add a little bit of information to the question, as that's too long for a comment here, I think. (Actually, we just got some guests, so I'll have to postpone.) – thymaro Sep 19 at 17:19
  • 1
    ok, you might have to debug the javascript then and find where the code is setting the header-sticky class on that element. At the same time you could set the top padding on the content element to be the same size as the header element, so that the text didn't jump up. – Robbie Jackson Sep 19 at 21:13
  • @thymaro just updated the solution with some code you can try. Obviously I haven't been able to confirm it works, but hopefully should be ok. There is also another element <div id="sp-title"> which is blank. It may be that if you insert some title somewhere it might fix the problem as well. – Robbie Jackson Sep 20 at 10:24
  • :D :D :D look, I'm very sorry for having wasted so much of your time with this. Now, the classes sticky-header and sp-section-1 are both added only after scrolling down. I was planning on starting over anyways, because I have elements from another template interfering and this is something I really can't explain, since the components are nowhere for me to find. This is still all really confusing to me. Sorry again. – thymaro Sep 20 at 17:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.