CODEWITHSUNDEEP
jquery
Dipak
Dipak

Reputation: 939

jquery fixed header doesn't work properly

If content is long, I mean if height of body is noticeably lengthy, if there is more scrollable part, fixed header works well.

But if scrollable part is minimal, the stage where body header and footer can be seen at once almost, then if it is scrolled to view last element of body, then fixed header starts to shake, in spite of forceful scrolling, fixed header remaining shaking, but If content is added and increases height, again it works well.

Actually where is problem, in js code or css class structure. I've added example here, but following example will not show problem for all devices, because according to device height, it will act differently. 

var navpos = $('nav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > navpos.top) {
    $('nav').addClass('navfixed');
  } else {
    $('nav').removeClass('navfixed');
  }
});
nav {
  float: left;
  width: 100%;
  background: #0E539A;
}

nav ul li {
  position: relative;
  display: inline-block;
}

nav ul li a {
  padding: 10px 15px;
  display: block;
  color: #e7e7e7;
}

.navfixed {
  top: 0;
  left: 0;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="class.php">Class</a></li>
    <li><a href="submanage.php">Class-Subject</a></li>
  </ul>
</nav>
<div>
  Hello<br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> End
  <br/> This content will not be shown, because it is near to end<br/>
</div>

Upvotes: 1

Views: 162

Answers (1)

Pete
Pete

Reputation: 58452

Your code doesn't work as your nav becomes fixed and so no longer takes the space. To avoid this, you can give the nav a holder and set it's height so that when the nav is moved, the space will still be taken.

Also as per my comment, bind is deprecated and you should use on instead:

var $navHolder = $('.navHolder'),
   $nav = $navHolder.children('nav').eq(0),   // cache this for better performance
   navOffset = $nav.offset().top;             // might as well do this one too
   
$navHolder.height($nav.outerHeight());        // set height of holder

$(window).on('scroll', function() {
  if ($(this).scrollTop() > navOffset) {
    $nav.addClass('navfixed');
  } else {
    $nav.removeClass('navfixed');
  }
});
nav {
  width: 100%;
  background: #0E539A;
}

nav ul li {
  position: relative;
  display: inline-block;
}

nav ul li a {
  padding: 10px 15px;
  display: block;
  color: #e7e7e7;
}

.navfixed {
  top: 0;
  left: 0;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navHolder"> <!-- add this div -->
  <nav>
    <ul>
      <li><a href="class.php">Class</a></li>
      <li><a href="submanage.php">Class-Subject</a></li>
    </ul>
  </nav>
</div>
<div>
  Hello<br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> End
  <br/> This content will not be shown, because it is near to end<br/>
</div>

Upvotes: 2

Related Questions