Why fixed block is blinking on scroll?

Question

I need to create header on bottom and make it fixed on top when user scrolling.

Why when I scrolling fixed header is blinking?

It's bit of code:

$(document).scroll(function () {
 var bodyTop = $('body').scrollTop();
 var navOffset = $('.main-nav').offset().top;
 $('.main-nav').toggleClass('header-fixed', (bodyTop > navOffset));
});

.wrapper { height: 99000px; }
.header-fixed { 
      position: fixed !important; top: 0 !important; 
      bottom: none; background: yellow !important; }
 .main-nav { width: 100%; height: 72px; position: absolute; bottom:0; background: blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <nav class="main-nav">
    </nav>
</div>

https://jsfiddle.net/u3kk219d/

You're toggling the class every time the scroll event fires. You just want to add it, not toggle it. — StephenWidom, Apr 26 '17 at 18:46
When I'm trying to add class and remove, remove class not working when I'm on top of screen @StephenWidom — Frunky, Apr 26 '17 at 18:48
Possible duplicate of [How can I make a div stick to the top of the screen once it's been scrolled to?](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) — blackandorangecat, Apr 26 '17 at 18:49
@Draco18s Can you explain? I'm using position fixed in .header-fixed(this class added when I'm go scroll after first full screen section) — Frunky, Apr 26 '17 at 18:50
Ah, I was looking for it and saw the class name, but not that it was actually using `fixed`. My mistake. — Draco18s no longer trusts SE, Apr 26 '17 at 18:52

score 3 · Accepted Answer · answered Apr 26 '17 at 18:51

3

I've moved the calculation of the element's offsetTop OUTSIDE the scroll, it only needs to be calculated the once. By doing this, it isn't messing with weird calculations every time you scroll, and it fixes the flicker.

var navOffset = $('.main-nav').offset().top;

$(document).on("scroll", function() {
  var bodyTop = $('body').scrollTop();
  $(".main-nav").toggleClass("header-fixed", (bodyTop > navOffset));
});

.wrapper {
  height: 99000px;
}

.header-fixed {
  position: fixed !important;
  top: 0 !important;
  background: yellow !important;
}

.main-nav {
  width: 100%;
  height: 72px;
  position: absolute;
  bottom: 0;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <nav class="main-nav">
  </nav>
</div>

answered Apr 26 '17 at 18:51

Snowmonkey

3,716
1
16
16

Glad I could help. Best of luck! – Snowmonkey Apr 26 '17 at 18:54
That's the perfect answer. – Yash Yadav Apr 26 '17 at 18:54
An easy gotcha, though. You can bang your head on those kinds of bugs all day, but unless you do something like console.log INSIDE the scroll loop and watch the element's offsetTop numbers jump, you might not catch it. – Snowmonkey Apr 26 '17 at 18:56

Why fixed block is blinking on scroll?

1 Answers1