Sticky navbar is flickering

JavaScript
1

Hi,

I’m using JQuery to make a menu sticky when the window is scrolled down.

It works fine if the window height is enough to scroll down the full header area, But if it is small, it will flicker when the page is scrolled down slightly.

Example of the flickering:
flickering

JQ

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

  var my_nav = $('.navbar-sticky');
  // grab the initial top offset of the navigation 
  var sticky_navigation_offset_top = my_nav.offset().top;

  // our function that decides weather the navigation bar should have "fixed" css position or not.
  var sticky_navigation = function() {
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top) {
      my_nav.addClass('stick');
    } else {
      my_nav.removeClass('stick');
    }
  };

  // run our function on load
  sticky_navigation();

  // and run it again every time you scroll
  $(window).scroll(function() {
    sticky_navigation();
  });

});

HTML

<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <title>Hall of fame</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="#">
</head>
<body>
  <header id="header">
    <div id="head" class="parallax" data-parallax-speed="1">
      <h1 id="logo" class="text-center logo-services">
        <img class="img-circle" src="" alt="logo">
        <span id="acknowledgments" class="tagline"><br>
                </h1>
            </div>
        
            <nav id="nav-sidebar" class="navbar navbar-default navbar-sticky">
                <div class="container-fluid">

                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>

    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>

    </div>
    </div>
    </nav>
  </header>

  <main id="main">

    <div class="container">
      <div class="row topspace">
        <div class="col-sm-8 col-sm-offset-2">

          <article class="post">
            <header class="entry-header">
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
            </header>
            <div class="entry-content">
              <p style="text-align: center;">
              </p>
            </div>
          </article>

        </div>
      </div>

    </div>

  </main>


  <script src="https://code.jquery.com/jquery-3.7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script src="#"></script>

</body>

</html>

css

html {
  font-size: 100%;
}

body {
  font-size: 15px;
  font-size: 0.9375rem;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  color: #666666;
  padding: 0;
}

.topspace {
  margin-top: 40px;
}

/*********************************************************************/
.navbar {
  border-width: 1px 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
}

.navbar.stick {
  position: fixed;
  top: 0;
  left: 0;
  opacity: .85;
}

.navbar-collapse {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}

.navbar-collapse .navbar-nav {
  float: none;
  margin: 0 auto;
  text-align: center;
}

.navbar-collapse .navbar-nav>li {
  float: none;
  display: inline-block;
}

.navbar-collapse .navbar-nav>li>a {
  padding: 20px 30px;
}

.dropdown ul.dropdown-menu {
  top: 85%;
  text-align: left;
}

.dropdown ul.dropdown-menu>li>a {
  padding: 5px 30px;
}

.navbar-default {
  background-color: #ffffff;
  border-color: #cccccc;
}

.navbar-default .navbar-nav>li>a {
  color: #454545;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .dropdown ul.dropdown-menu>li>a {
  color: #454545;
}

.navbar-default .dropdown ul.dropdown-menu>li>a:hover {
  background-color: #eeeeee;
  color: #000000;
}

.navbar-default .navbar-toggle {
  border-color: #666666;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #333333;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #cccccc;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: #ffffff;
  color: #000000;
}

#main {
  flex: 1;
}

#nav-sidebar {
  width: 100%;
  z-index: 1;
}

/*********************************************************************/
.section-title,
.entry-title {
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 0px 0 25px;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 36px;
  font-size: 2.25rem;
  letter-spacing: 1px;
}

.section-title a,
.entry-title a {
  color: #333333;
}

.section-title span,
.entry-title span {
  display: inline-block;
  position: relative;
}

.section-title span:before,
.entry-title span:before,
.section-title span:after,
.entry-title span:after {
  content: "";
  position: absolute;
  height: 4px;
  top: .53em;
  width: 400%;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.section-title span:before,
.entry-title span:before {
  right: 100%;
  margin-right: 45px;
}

.section-title span:after,
.entry-title span:after {
  left: 100%;
  margin-left: 45px;
}

.entry-header .entry-meta {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-style: italic;
  font-weight: normal;
  color: #a5a5a5;
  margin: 0 0 15px 0;
}

.entry-header .entry-meta a {
  color: #a5a5a5;
}

.entry-content {
  margin: 0 0 60px 0;
}

.entry-content h2 {
  line-height: 1.2;
  font-size: 30px;
  font-size: 1.875rem;
  padding-top: 20px;
  margin-bottom: 20px;
}

You can test the code on Chrome with dimensions iPhone12 Pro.

Can anyone point me in the direction as to what I need to change to get the bar to stop flickering?
Thanks for help.

2

@WhoAmI68
I found this stack overflow post, this should lead you in the right way.

Happy coding!
javascript - Sticky nav bar flickers when scrolling slowly - Stack Overflow

3

Do you really need JS for this? Can’t you just use the sticky CSS property? Also, Bootstrap comes with the option to fix the nav to the top.

Not really sure where your logo is supposed to be located in relation to the nav?

4

It is my post :). I’m still looking for solutions or ways to fix it.

5

I don’t need JS but The script is check the distance the page has been scroll then apply the fixed nav class. Sticky CSS property not fix, when you scroll page. I need that it to become sticky at a certain amount of px from top.

6

You say you don’t need it and then tell me why you need it? The point is, you do not need JS to do that because you do not need to dynamically add a class to get a sticky nav.

That is literally how the sticky property works. The top offset is how far from the top it should stick to. You can do the same with Bootstrap by overwriting the top property value it sets (using !important).

But you have to move the nav out of the header, so its scroll container is the body, then push the nav away from the top using margin. But your example might be incomplete and there might be a need for the nav to be inside the header.

Example 
<!DOCTYPE html>
<html xml:lang="en" lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <title>Hall of fame</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="#">
</head>

<body>
  <header id="header">
    <div id="head" class="parallax" data-parallax-speed="1">
      <h1 id="logo" class="text-center logo-services">
        <img class="img-circle" src="" alt="logo">
<!-- not sure where you ment to close this?          -->
    <span id="acknowledgments" class="tagline"><br>
      </h1>
    </div>
  </header>

  <nav id="nav-sidebar" class="navbar navbar-default navbar-sticky">
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      </div>

      <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>

      </div>
    </div>
  </nav>

  <main id="main">

    <div class="container">
      <div class="row topspace">
        <div class="col-sm-8 col-sm-offset-2">

          <article class="post">
            <header class="entry-header">
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
              <h1 class="entry-title"><a class="awesome-color" style="text-decoration: none;">Hall of fame</a></h1>
            </header>
            <div class="entry-content">
              <p style="text-align: center;">
              </p>
            </div>
          </article>

        </div>
      </div>

    </div>

  </main>

  <script src="https://code.jquery.com/jquery-3.7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script src="#"></script>

</body>

</html>

html {
  font-size: 100%;
}

body {
  font-size: 15px;
  font-size: 0.9375rem;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  color: #666666;
  padding: 0;
}

.topspace {
  margin-top: 40px;
}

/*********************************************************************/
.navbar {
  border-width: 1px 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  position: sticky !important;
  top: 0px;
  margin-top: 30px;
}

.navbar.stick {
  position: fixed;
  top: 0;
  left: 0;
  opacity: .85;
}

.navbar-collapse {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  font-family: "Open sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}

.navbar-collapse .navbar-nav {
  float: none;
  margin: 0 auto;
  text-align: center;
}

.navbar-collapse .navbar-nav>li {
  float: none;
  display: inline-block;
}

.navbar-collapse .navbar-nav>li>a {
  padding: 20px 30px;
}

.dropdown ul.dropdown-menu {
  top: 85%;
  text-align: left;
}

.dropdown ul.dropdown-menu>li>a {
  padding: 5px 30px;
}

.navbar-default {
  background-color: #ffffff;
  border-color: #cccccc;
}

.navbar-default .navbar-nav>li>a {
  color: #454545;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #000000;
  background-color: #ffffff;
}

.navbar-default .dropdown ul.dropdown-menu>li>a {
  color: #454545;
}

.navbar-default .dropdown ul.dropdown-menu>li>a:hover {
  background-color: #eeeeee;
  color: #000000;
}

.navbar-default .navbar-toggle {
  border-color: #666666;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #333333;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #cccccc;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: #ffffff;
  color: #000000;
}

#main {
  flex: 1;
}

#nav-sidebar {
  width: 100%;
  z-index: 1;
}

/*********************************************************************/
.section-title,
.entry-title {
  display: block;
  width: 100%;
  overflow: hidden;
  margin: 0px 0 25px;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 36px;
  font-size: 2.25rem;
  letter-spacing: 1px;
}

.section-title a,
.entry-title a {
  color: #333333;
}

.section-title span,
.entry-title span {
  display: inline-block;
  position: relative;
}

.section-title span:before,
.entry-title span:before,
.section-title span:after,
.entry-title span:after {
  content: "";
  position: absolute;
  height: 4px;
  top: .53em;
  width: 400%;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.section-title span:before,
.entry-title span:before {
  right: 100%;
  margin-right: 45px;
}

.section-title span:after,
.entry-title span:after {
  left: 100%;
  margin-left: 45px;
}

.entry-header .entry-meta {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 18px;
  font-size: 1.125rem;
  font-style: italic;
  font-weight: normal;
  color: #a5a5a5;
  margin: 0 0 15px 0;
}

.entry-header .entry-meta a {
  color: #a5a5a5;
}

.entry-content {
  margin: 0 0 60px 0;
}

.entry-content h2 {
  line-height: 1.2;
  font-size: 30px;
  font-size: 1.875rem;
  padding-top: 20px;
  margin-bottom: 20px;
}
7

Thanks for the recommendation, I will try it!!!

8

About <!-- not sure where you ment to close this? --> I do not know why it is open in the demo :).

However, it does seem to work perfectly. Thanks very much for your help.

9

Happy to help.

If you can, avoiding JS and doing it in CSS, is often a good idea. Not always, there are pure CSS solutions that become too hacky and unnecessarily complex when all you need is a few lines of JS.

Avoiding doing things on scroll events is usually the right choice. But we do have the Intersection Observer API which is a much better solution if you do need to do scroll stuff.