Sticky nav bar is flickering when reaching bottom of page

Question

I recently go my nav bar to act as a sticky nav bar that adheres to the top of my page after I scroll down to a certain point, however, when I reach the bottom of my page the entire nav bar flickers, and even disappears sometimes. Think of it as an old TV that would flicker and you would end up hitting on the side to stop the flickering. How would I hit my nav bar to stop it from flickering. Here is my site so you can witness all the glory of the flicker.

Here is my HTML for the nav:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

And here is my JS:

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: 675
        });
    });
</script>

An important note should be that this only began occurring after I changed the offset in my JS from offset: $('#nav').position() to offset: 675. You might say, well just change it back, but with the old offset, my sticky nav would jump prematurely to the top.

Thanks for any help of input you can provide me!

Which browser you are using? Just tested with ff and chrome, but looks ok. Your website doesn't look good on my 1440x900 resolution monitor then scrolling down. — Morpheus, Feb 12 '13 at 12:37
Have you tried using `-webkit-perspective: 1000; -webkit-backface-visibility: hidden;`? [Source](http://stackoverflow.com/a/3461770/1685185) — , Feb 12 '13 at 12:41
@Morpheus Interesting, I tested it in FF, Chrome, & Safari, and had the flicker effect in all 3. What do you mean it doesn't look good at that resolution? My monitor can only get about 1300px wide. I'm using Bootstrap so it does tend to act weird when viewed on wide monitors. Any ideas on how to fix it? — Brian, Feb 12 '13 at 12:58
@thekalaban I've tested that code in both my body and #nav tags, but the flicker effect still remains. — Brian, Feb 12 '13 at 13:00
@Brian when I click contact it scrolls down, but i can see about 100px of Service content. It looks ok in width. — Morpheus, Feb 12 '13 at 13:06
@Morpheus Oh yeah, I haven't set my scroll points accurately yet. I have too many embedded divs, so I want to clean it up a little and reset my links. My main issue at the moment is the flickering, but if you can't see it maybe I shouldn't worry about it too much. — Brian, Feb 12 '13 at 13:16
Hello. If you're willing to use another plugin, check this out: [sticky-nav](https://github.com/nguyenj/sticky-nav) I got frustrated with Twitter Bootstrap's Affix component, it keeps flickering for me as well. Here is a an example of the mentioned plugin: [example](http://jsfiddle.net/nguyenj/eg2Ly/) — Seed, Oct 13 '13 at 16:39

score 11 · Answer 1 · answered May 14 '13 at 12:28

Your site looks fine to me now, but I was brought here looking for a solution to the same problem, so I thought I would add my experience here.

The issue I had was that the affix code applies a class (e.g. affix or affix-bottom) to the affixed element based on its vertical position on the page. I'll call these 'zones'.

If the CSS for the new class is such that it moves the affixed element vertically, it may end up instantly in a different zone, so the class is removed, so it moves back, so the class is applied etc... The position therefore alternates with every onscroll event, and flickers.

The key for me was to ensure that the data-offset-top / data-offset-bottom values and CSS classes and were set so that the element no longer moves vertically when the affix toggles. I.E. Something like:

<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300">
  ...
</div>

(The data-offset-bottom is to reattach the element so it doesn't crash into e.g. a tall footer, and won't always be necessary.) And then:

.someClass.affix {
  /* position: fixed; already applied in .affix */
  top: 10px;
  /* might also need e.g. width: 300px; as position: fixed; removes the element from its parent. */
}
.someClass.affix-bottom {
  position: absolute; /* Start scrolling again. */
  top: auto; /* Override the top position above. */
  bottom: 20px; /* It should stop near the bottom of its parent. */
}

Sometimes the jump when the CSS classes are changed pushes the element further into the zone it is entering, which leads to a single 'flick' at the boundary, but not repeated flickering.

N.B. I think the very slight jump when your menu becomes fixed could possibly be smoothed out in this way, by making a very slight adjustment to the vertical position of the element when affixed, and/or by setting data-offset-top to some appropriate value.

Cheers,

Leo

score 8 · Answer 2 · edited May 23 '17 at 11:47

8

Answer from this Bootstrap 3 Fixed Top Navbar...

Just add the following to .navbar

.navbar
{
   -webkit-backface-visibility: hidden;
}

edited May 23 '17 at 11:47

Community

1
1

answered Jun 12 '14 at 19:36

ken

13,869
6
42
36

Thanks a ton! Apparently out of the box, Bootstrap 3.x contains this webkit glitch. I'm glad the solution is a simple css 'hack'. I am surprised this has not been patched yet. – Jim22150 Jul 11 '14 at 00:39
1

yeah, I am waiting for features like well color, vertical space etc. still need some hack to make it from nice -> nicer :) – ken Jul 11 '14 at 02:53
Accept this answer as if it is useful for u @Brian – Steffi Keran Rani J Jun 27 '18 at 11:48

score 2 · Answer 3 · answered Aug 19 '13 at 14:28

The problem for me was that my page content was smaller than my menu, so when the menu was changed to the fixed position it caused the page to narrow. I set the content min-height with this (coffeescript):

$ ->
  $('.content').css('min-height', ->
    $('.bs-docs-sidebar').height())

And everything worked like a charm.

score 1 · Answer 4 · edited Dec 07 '16 at 10:45

1

Just add this to your CSS class.

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }

edited Dec 07 '16 at 10:45

Pang

9,564
146
81
122

answered Dec 07 '16 at 10:26

Rajon Tanducar

308
4
8

Sticky nav bar is flickering when reaching bottom of page

4 Answers4