jquery - Sticky navbar is flickering whilst scrolling down

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:

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 {
  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: Geia, 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;
}

<!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="/[email protected]/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=".7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
  <script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

</body>

</html>

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:

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 {
  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: Geia, 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;
}

<!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/npm/[email protected]/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/jquery-3.7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

</body>

</html>

You can test it 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?

Share Improve this question edited Feb 3 at 14:58 DarkBee 15.6k8 gold badges72 silver badges117 bronze badges asked Feb 2 at 16:09 ОнСамый 111 bronze badge

2 Why not only use the CSS property position: sticky? See: developer.mozilla./en-US/docs/Web/CSS/position What you have looks like a hysteresis effect. – KIKO Software Commented Feb 3 at 15:10
I tried, it doesn't work. – ОнСамый Commented Feb 8 at 17:07

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

lasj helped to resolve the bug for you at freecodecamp.. Below you can find his decision.

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Sticky navbar is flickering whilst scrolling down - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)