Scrollen nach oben mit festgelegter Navigationsleiste, die sich in verschiedenen Browsern unterschiedlich verhält

Ich stoße auf ein Problem mit einer festen Navigationsleiste in twitter-bootstrap-3, für die ich keine Erklärung oder Lösung finden kann.Scrollen nach oben mit festgelegter Navigationsleiste, die sich in verschiedenen Browsern unterschiedlich verhält

Wenn ich an der Spitze der Seite scrollen gibt es unterschiedliche Verhalten in verschiedenen Browsern:

In Chrome (MacOS), den ganzen Inhalt nach unten scrollt, wie folgt aus:

In Safari (auch Mac), bleibt die navbar oben befestigt, und der Hintergrund erscheint darunter:

Im Idealfall würde ich das Verhalten wie in Chrome bevorzugen. Ich habe zahlreiche Ansätze mit css unter Verwendung overflow, position versucht, aber ich kann es nicht herausfinden. Kann ich dieses Verhalten mit CSS korrigieren (? Oder vielleicht Javascript/jQuery)

Hier die nackten Knochen meines Codes ist (die !important s sind hier nur Bootstrap Styling außer Kraft zu setzen):

body { 
 
    background-color: #eee !important; 
 
    padding-top: 54px !important; 
 
} 
 

 
.navbar { 
 
    min-height: 54px !important; 
 
    border-bottom: 2px solid orange !important; 
 
    margin-bottom: 0 !important; 
 
} 
 

 
.navbar-default { 
 
    background: #fff !important; 
 
    .navbar-brand { 
 
     color: #000 !important; 
 
    } 
 
} 
 

 
.usp-bar { 
 
    background-color: orange; 
 
    color: #fff; 
 
    height: 30px; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    height: 800px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<body> 
 

 
    <div id="app"> 
 

 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#"> 
 
        Navbar 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </nav> 
 

 
    <div class="usp-bar"> 
 
     orange bar 
 
    </div> 
 

 
    <div class="content"> 
 
     Content 
 
    </div> 
 

 
    </div> 
 
</body>

Quelle

2017-12-21 McVenco

Hacks

See puresamari der Kern "overscroll background-color on ios", die einen fixed Container platziert im negativen Bereich über der Seite. Funktioniert nicht in Safari 11 oder Mobile Safari.

Overscroll-Verhalten

Chrome 63 eingeführt, um die overscroll-behavior Eigenschaft, die Sie blättern Verkettungs oder overscrolling vollständig deaktivieren können. Allerdings noch nicht in Safari unterstützt ☹

Finale Tipps

Die zuverlässigste Methode auf html und eine andere auf body eine Hintergrundfarbe setzt, das heißt http://peter.coffee/htmls-background-color.

Es ist noch nicht möglich, zu steuern, wie Browser überrollen, also setzen Sie stattdessen die richtigen Farben und lassen Sie am oberen Rand der Seite einen negativen Platz für die feste Kopfzeile.

Interessanter ist das, was Stackoverflow tut:

.top-bar { 
    height: 50px; 
} 

.top-bar._fixed { 
    position: fixed; 
    min-width: auto; 
} 

.top-bar ~ .container, .top-bar ~ #announcement-banner { 
    margin-top: 50px; 
}

Quelle

2017-12-23 23:34:10 Tom

So 'Overscroll' ist das Wort, das ich wurde :) suchen. Interessantes Wissen, anscheinend löst es mein Problem (vollständig) nicht, aber ich habe etwas, mit dem ich arbeiten kann. Vielen Dank! – McVenco

Scrollen nach oben mit festgelegter Navigationsleiste, die sich in verschiedenen Browsern unterschiedlich verhält

Antwort

Verwandte Themen