CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapnav
Brian
Brian

Reputation: 2727

Sticky nav bar is flickering when reaching bottom of page

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!

Upvotes: 12

Views: 19791

Answers (4)

Rajon Tanducar
Rajon Tanducar

Reputation: 378

Just add this to your CSS class.

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

Upvotes: 1

ken
ken

Reputation: 14515

Answer from this Bootstrap 3 Fixed Top Navbar...

Just add the following to .navbar 

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

Upvotes: 8

Kadu Di&#243;genes
Kadu Di&#243;genes

Reputation: 507

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.

Upvotes: 2

Leo
Leo

Reputation: 4437

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

Upvotes: 11

Related Questions