Twitter Bootstrap Question posted in

Twitter bootstrap – Sticky nav bar making content jump

I have a sticky nav bar and I’m using twitter bootstrap. When ever I scroll past a certain point my sticky navbar is displayed, but when it’s displayed my content jumps up. What I want is my content to stay where it is and not jump.

My HTML

<body>
  <div class="top_menu_wrapper">
    <div class="toggle_wrapper">
      <ul>
        <li>
          <div class="main_menu_header">
            <div class="navbar-header">
              <button class="navbar-header collapsed move-navtoggle" 
                      data-target="#main-menu" data-toggle="collapse" 
                      type="button">
                <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>
        </li>
      </ul>
    </div>
    <div id="main-menu" class="collapse navbar-collapse main_menu">
      <ul class="nav navbar-nav home-nav">
        <li class="nav_item">
          <a href="#">About Us</a>
        </li>
        <li class="nav_item">
          <a href="#">Services</a>
        </li>
        <li class="nav_item">
          <a href="#">News & Events</a>
        </li>
        <li class="nav_item">
          <a href="#">Volunteer</a>
        </li>
        <li class="nav_item">
          <a href="#">Donate</a>
        </li>
        <li class="nav_item">
          <a href="#">Contact Us</a>
        </li>
      </ul>
      <div class="clearboth"></div>
    </div>
  </div>
  <div class="content">
    <p>some content</p>
  </div>
</body>

My JS

$(window).scroll(function () {
    if ($(window).scrollTop() > 186) {
        $('.top_menu_wrapper').addClass('navbar-fixed-top').css({
            margin: '0 auto',
            width: '1024px',
            'border-top': '6px solid #6097dd'
        });
    } else {
        $('.top_menu_wrapper').removeClass('navbar-fixed-top').css({
            width: '100%',
            'border-top': 'none'
        });
    }
});

I tried making a jsfiddle but I’m not able to replicate my error. JSFIDDLE

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to fix it. I had to put another wrapper around my menu div and set that height to the same height as my menu. And it worked.


  2. 0

    Just remove height from .home-nav. the height of .home-nav is small and the content of navigation is large.That bounce is coming because first full navigation is displayed and then the height is hiding contact us. which results in bounce. 

    .home-nav {
    float: right;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search