2016-03-23 16 views
2

Alle,Problem mit flattern JS Menü

Ich habe ein bisschen ein einzigartiges Problem. Ich habe meiner Site ein JS hinzugefügt, das meinem Menü eine gewisse Deckkraft verleiht, wenn ich über eine bestimmte Anzahl von Pixeln scrolle. Ich musste dann mit der Höhe einiger header divs herumspielen und jetzt, wenn Sie nach unten scrollen (langsam hinter dem Logo) und zum Header gelangen, bleibt es oben mit Deckkraft, was ich will, aber Sie werden sehen divs "flattern", während du weiter scrollst ... irgendwelche Ideen? Gibt es eine bessere Möglichkeit, dies in CSS zu tun?

Ich kann nicht herausfinden, wie man es diagnostiziert.

Danke.

http://lebellandscaping.weebly.com/

+0

sieht so aus, als müssten Sie die Höhe des Menüs aus der Gleichung nehmen, die darüber entscheidet, wie weit die Seite gescrollt wird. vielleicht würde ein Platzhalter elm das vereinfachen. – dandavis

Antwort

1

Interessantes Problem, ich glaube, ich es isoliert haben, wenn ich die Konsole öffnen, und kann die Elemente und CSS sehen Sie sehen können, dass das Flattern auf sich Körper auftritt. Wie Sie scrollen können Sie den CSS-Wechsel von Rand oben sehen: 0 bis Rand oben: 49 sehr schnell, genau in der Zeit mit dem Flattern:

Hier sind zwei Screenshots, die ich nahm, beachten Sie die richtigen Seiten, css Zeug:

enter image description here

vs:

enter image description here

Sie brauchen, dass padding-top konsistent durch die Rolle zu halten ...

gute Frage.

+0

Danke. Dieser Pin zeigt, wo das Problem liegt ... Ich weiß nicht, wie das passiert, nachdem ich an Pixel 220 gescrollt habe, als dies in der einzigen js, die 220 referenziert. Es ist die js, die ich verwende, um die Deckkraft anzuwenden. $ (window) .scroll (function() { var scroll = $ (window) .scrollTop(); wenn (scroll> = 220) { $ (". nav-wrap"). addClass ("darkHeader")); } else { $ (".nav-wrap"). RemoveClass ("dunklerHeader"); } }); –