Sticky Navigation Element Jumps During Scroll

Sticky navigation element jumps during scroll

After seeing you asking for help on another answer, I will try and explain more clearly for you.

The Problem

Your problem is when you add position:fixed to the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.

How To Fix

You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.

<div class="nav-wrapper" style="height:80px;"> <-- add this

    <div class="your-original-nav" style="height:80px"></div>

</div> <!-- add this

Now, when you set the navigation bar to fixed and it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.

A Suggestion

From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:

// cache the element
var $navBar = $('.your-original-nav');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
    } else {
        $navBar.removeClass('fixed');
    }

});

You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.

A Demo

This is a little demo which might help you - I was bored and feeling helpful :)

Fix jump when creating sticky scroll navbar

Use position: sticky all the time, then there's no need to to listen to the scroll event or calculate dimensions and offset, let the browser do it for you.

.navbar{

    display: grid;

    grid-template-columns: repeat(3, auto);

    background-image: url(resources/navbar.png);

    width: 100%;

    background-size: contain;

}

.sticky{

    position: sticky;

    top: 0;

    width: 100%;

    position: -webkit-sticky;

    position: -moz-sticky;

    position: -ms-sticky;

    position: -o-sticky;

}

section {

   height: 1000px;

   border: 1px solid red;

}

  

<body>

    <img class="header-image" src="resources/header.PNG" alt="Sample Image">

    <nav class="navbar sticky" id="navbar">

        <div><a href="pages/gallery.html">Galleri</a></div>

        <div class="active"><a href="index.html"><img class="boat-logo" src="resources/logo.png" alt="Sample Image"></a></div>

        <div><a href="pages/timeline.html">Historikk</a></div>

    </nav>

    <section class="content"></section>

</body>

Sticky Header - buggy jumping when scrolling the page

The issue causing a sudden jump when scrolling is in your css. Specifically this part.

.fbt_sticky_nav.sticky__nav {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.fbt_sticky_nav.sticky__nav.scrolling_nav {
  opacity: 1;
  visibility: visible;
}

To see what's happening, in the first block .fbt_sticky_nav.sticky__nav try setting the opacity to 1 and visibility to visible and scrolling up and down the page.

opacity: 1;
visibility: visible;

When you do that you'll see that when you start scrolling from the top of the page, the nav bar is hidden. Then when you get a little ways down, the nav bar suddenly pops into view. Then, as you keep scrolling, the nav bar slides up out of view. Then as you scroll just a little further, the nav bar slides back down into view again.

The thing about the properties visibility and opacity is that they don't actually remove the element from the dom. It's just hidden from view. So in your case, you have this fixed position element that suddenly pops into view but still remains unseen.

If you want something to be removed from the dom entirely, use display: none. When you want to show it again, use display: block

.fbt_sticky_nav.sticky__nav {
  position: fixed;
  display: none;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.fbt_sticky_nav.sticky__nav.scrolling_nav {
  opacity: 1;
  display: block;
}

Note that this does break the little slide down animation when scrolling. The nav just suddenly appears without any transition. But it stops the sudden jump that happens when scrolling.

There is a larger issue at hand and it will require some more investigation on your part. Applying the fix above really only treats the symptoms of the problem. It doesn't cure it.

I haven't really got the bandwidth to dive much further into this but, I'd take a look at the jQuery code and double check your logic.

The relevant part looks to be:

$(window).scroll(function () {
  var scroll = $(window).scrollTop();
  if ((scroll > 300) & minimumWidth(1200)) {
    $(".fbt_sticky_nav").addClass("sticky__nav");
  } else {
    $(".fbt_sticky_nav").removeClass("sticky__nav");
  }
  if ((scroll > 400) & minimumWidth(1200)) {
    $(".fbt_sticky_nav").addClass("nav_offset");
  } else {
    $(".fbt_sticky_nav").removeClass("nav_offset");
  }
  if ((scroll > 500) & minimumWidth(1200)) {
    $(".fbt_sticky_nav").addClass("scrolling_nav");
  } else {
    $(".fbt_sticky_nav").removeClass("scrolling_nav");
  }
});

Page jumps when menu gets sticky on scrolling down

What you could do is add padding-top to the <body> element. So when your sticky header becomes sticky it won't leave a gap between your content and the main wrapper.

This will stop it from jumping around but keeps the flexibility to make your theme.

$(document).scroll(function() {

  var sticky = $('.header-sticky');

  var scroll = $(window).scrollTop();

  /* Added body padding when actived */

  if (scroll >= 100) {

    sticky.addClass('header-sticky-on');

    $('body').addClass('js-sticky-on');

  } else {

    sticky.removeClass('header-sticky-on');

    $('body').removeClass('js-sticky-on');

  }

});

/* added: height of element */

body.js-sticky-on {

  padding-top: 18px;

}

header {

  position: relative;

  width: 100%;

  z-index: 99;

  background-color: #ccc;

}

header.header-sticky-on {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 0;

  right: 0;

  background-color: #fff;

  -webkit-animation: fadeInDown .5s;

  animation: fadeInDown .5s;

  box-shadow: 0px 0px 40px rgba(83, 88, 93, 0.1);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <header class="header-sticky">

    <!-- ======================= 

     Main header Start-->

    <nav class="main-header">

      <div class="container">

        "Content goes here Content goes here Content goes here"

      </div>

    </nav>

    <!-- ======================= 

     Main header End-->

  </header>

  <section class="main-content">

    <p>

      What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type

      specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more

      recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The

      point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem

      Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where

      does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College

      in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and

      1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",

      comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact

      original form, accompanied by English versions from the 1914 translation by H. Rackham. Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,

      or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend

      to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The

      generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

    </p>

  </section>

</body>

Content under sticky header jumps on scroll

Need more context, but from the sounds of it, when you add position fixed, you're taking the announcement out of the context of the page, so it no longer takes up space - it is essentially floating above the other content. This will mean the content will move up to the top.

Once you remove position:fixed, you're adding it back into the page, making it take up height, pushing the content down.

To remedy this, I would just always have the announcement as position fixed and add some padding-top on the parent element the same height as the announcement. Or you could use position:sticky;

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Sticky nav makes a weird jump with first scroll (fixed position)

Add the fixed class to the nav in html.

https://jsfiddle.net/9zk18nch/

Page jumps when sticky navigation appears

When you make an element position: fixed;, it is removed from the flow of the page, meaning it won't affect other elements. Any height that it once occupied is nullified.
Here is an example of this behavior.

The non-sticky navigation is 105px, so when it becomes sticky, all the elements after your navigation will move up 105px to occupy that space. Consider applying that same 105px as padding-top to the <body> to make up for the now-missing navigation bar. Here is the same example from above, but with the fix now in place.

$(window).scroll(function() {
  if ($(this).scrollTop() > 400){
    $('nav').addClass('sticky'); 
    $('body').css('padding-top', '105px'); //Height of non-stick nav
   }
  else{
    $('nav').removeClass('sticky');
    $('body').css('padding-top', '');
  }
});

Sticky Navigation Element Jumps During Scroll