Wie kann ich die Navigationsleiste oben halten, wenn ich über den oberen Rand der Seite scrolle?

Question

Wenn Sie in Browsern wie Safari und Chrome für Mac versuchen, am Anfang einer Seite nach oben zu scrollen, können Sie zwar noch ein wenig nach oben scrollen, aber mit Widerstand, und die Seite springt zurück, wenn Sie loslassen .

Ich habe eine Navigationsleiste über den Anfang meiner Seite. Wenn der Benutzer über den oberen Rand der Seite scrollt, bewegt sich die Navigationsleiste mit dem Rest der Seite nach unten, wie in this demo video. Wie kann ich die Navigationsleiste auch während des Scrollens oben auf meiner Seite halten?

Answer 1

Ich denke, Sie möchten eine "sticky header" erstellen, die oben auf der Seite bleibt, wenn Sie nach unten scrollen.

position: fixed; 
top: 0; 

Hinweis: Sie können mit CSS „Position“ Herrschaft über Ihr navbar tun, vielleicht ist dies ein Duplikat this question ist.

Answer 2

Versuchen Sie diese Lösungen, ich rate nur nach Ihrem gif.

1. html,body{overflow:hidden} (oder)
2. #nav{position:fixed;top:0; or margin-top : 0;} (oder)
3. $("#navbar").css("marginTop",'0')

Im dritten Beispiel können Sie versuchen, Ihren CSS-Wert mit variabler speichern und dann durch, wenn die Bedingung verwenden, können Sie versuchen, und kann sich von diesem Bounce-Effekt befreien.

Answer 3

Ich denke, der einzige Weg ist, den Bounce-Effekt zu deaktivieren. Der Bounce-Effekt arbeitet am HTML-Tag selbst, sodass keine absolute oder feste Positionierung dafür sorgt, dass es bleibt. Versuchen Sie, versteckte Eigenschaft auf HTML-Tag im Überlauf, wie folgt zu verwenden: html {overflow: hidden}