How to remove the bounce on the header?

Asked Jul 18 '14 at 04:38

Active Jul 18 '14 at 04:38

Viewed 126 times

http://oxfordhigh.oxfordschools.org/ this is the site that im working on and im having a problem with the header. It bounces whenever i scroll it down. This bug only occurs in IE and Chrome but in mozilla it seems fine(as i've checked on my end).

this is the javascript that i've added on the site for the fixed header:

<script type="text/javascript">
     $(window).scroll(function () {
         if ($(this).scrollTop() > 0 && $(window).width() > 1000) {
        $('#main').css("marginTop", "220px");
        $('.breadcrumb-wrapper').addClass("bread-fix-to-top");
        $('#header').addClass("fix-to-top");
      } else {
        $('#main').css("marginTop", "0");
        $('.breadcrumb-wrapper').removeClass("bread-fix-to-top"); 
        $('#header').removeClass("fix-to-top");
      }
      });
  </script>

Any idea on how to fix this kind of issue?

asked Jul 18 '14 at 04:38

user3804724

There is no such thing as `marginTop`. It should be `margin-top`. Try replacing this line `$('#main').css("marginTop", "0");` with `$('#main').css("margin-top", "0");` – AdityaParab Jul 18 '14 at 04:52
same applies for `$('#main').css("margin-top", "220px");` – AdityaParab Jul 18 '14 at 04:53
It's the same thing. Didn't change at all. – user3804724 Jul 18 '14 at 05:10
@Maverick this usage is valid in jquery, which is known as 'DOM Formatting'. – rhgb Jul 18 '14 at 05:11
create classes with margin-top styles and add/remove it like other classes. – Suresh Ponnukalai Jul 18 '14 at 05:28
Got fixed already? Seems fine in both chrome and IE. – Madmenyo Jul 18 '14 at 05:59
@MennoGouw when your using the mouse wheel to scroll it bounces the header..but when u click the scroll and drag it down it seems fine.. – user3804724 Jul 18 '14 at 06:04
No it works perfectly while scrolling for me. Do you have latest chrome update? – Madmenyo Jul 18 '14 at 06:05

How to remove the bounce on the header?

0 Answers0