CODEWITHSUNDEEP
javascripthtmlcss
J.Pyz
J.Pyz

Reputation: 233

Issue with fluttering JS menu

All,

I have a bit of a unique issue. I added some JS to my site that adds some opacity to my menu when scrolling past a certain amount of pixels. I then had to play around with the height of some of the header divs and now when you scroll down (slowly past the logo) and get to the header it stays at the top with opacity which is what I want, but you will see the divs "flutter" as you keep scrolling...any ideas? Is there a better way of doing this in CSS?

I cant figure out how to diagnose it .

Thanks.

http://lebellandscaping.weebly.com/

Upvotes: 2

Views: 45

Answers (1)

omarjmh
omarjmh

Reputation: 13896

Interesting problem, I think I may have isolated it, when I open up the console, and can see the elements and css you can see that the fluttering is occurring on they body. As you scroll you can see the css change from margin-top: 0 to margin top: 49 very rapidly, exactly in time with the flutter:

Here are two screen shots I took, note the right sids, css stuff:

enter image description here

vs:

enter image description here

You need to keep that padding-top consistent through the scroll...

good question.

Upvotes: 1

Related Questions