0

In mobile version firefox everything works perfect.In chrome have bug with fixed positioning.When i scroll the header must change absolute to fixed and height 65 to 35 pixels.But its flickering. Im novice in web development.And its my first static web site. Im using jquery plugin skrollr.

Heres my jquery code

$(window).scroll(function(){
      if ($(this).scrollTop() > 20) {
        $('.menu ').addClass("sticky");
      } 
      else {
        $('.menu').removeClass("sticky");
      }
    });

and my CSS code 

.menu {
    position absolute;
    background: white;
    height: 65px;
}
.menu.sticky {
    position:fixed;
    height: 37px;
    max-width: 480px;
    padding: 0;
    background: white;
}

Please help already week cant solve this problem.

Randall
  • 2,414
  • 3
  • 35
  • 63

1 Answers1

0

use transition:all 0.4s ease-in-out in .menu class. You can adjust delay of transition as per needed. One more you don't need to add any plugin for this. You can easily handle this with small jquery code and CSS3 animation.

Anil
  • 523
  • 1
  • 8
  • 16
  • first thank you for helping.Secong i try to change header height in scroll from 65px to 35 px.Right now everything work stable (header dont flickering) except jquery code.It must add class sticky to class menu in scroll.If u want to see what i want to realize look [here](https://www.gatesnotes.com/) please.and i almost forget desktop version work great.But mobile version(max-width 480px;)working unstable. – Randall Jun 10 '17 at 09:29
  • really sorry but its new question and i didn't get your point. I have checked and found that at Line:1358 you have added a fix height 40px to your header so its not animating – Anil Jun 10 '17 at 10:05
  • However thank you. Don't apologize my English to bad.I can't correctly explain my problem. – Randall Jun 10 '17 at 10:34