Fix Bootstrap Navbar auf Scrolling

Question

1. nach oben habe ich eine div (named=status bar) am oberen Rand der Seite mit height = 25px, top:0 und position: fixed.
2. Ich möchte ein Bootstrap navbar (mit transparentem Hintergrund) 100px unter dieser Statusleiste platzieren.
3. Wenn die Seite gescrollt wird, scrollt der navbar und berührt die Statusleiste und: 3.1. wird unterhalb der Statusleiste behoben. 3.2. ändert seine Hintergrundfarbe in red (#ff0000). 3.3. Der Rest der Seite scrollt nach unten.
4. Wenn die Seite hochgerollt wird, bleibt die Position der navbar- und Statusleiste unverändert, bis die Schriftrolle fast bis zum oberen Rand des Browsers reicht.
5. Wenn der obere Teil des Browsers erreicht ist, bleibt die Statusleiste an ihrer Position wie in # 1. Und die navbar scrollt und wird in einer Entfernung von 100px von der Statusleiste gesetzt.

HTML (Statusleiste)

<div class="genxcoders-status-bar">  <div class="genxcoders-left genxcoders-fc-white genxcoders-fw-500"> 
     <span id="genxcoders-date"></span> 
    </div> 
    <div class="genxcoders-center"> 
     Support: <i class="fa fa-phone"></i> +91-712-606 GENX 
    </div> 
    <div class="genxcoders-right"> 
     <ul class="genxcoders-status-bar-social"> 
      <a href="#"><li><i class="fa fa-facebook-f"></i></li></a> 
      <a href="#"><li><i class="fa fa-twitter"></i></li></a> 
      <a href="#"><li><i class="fa fa-linkedin"></i></li></a> 
      <a href="#"><li><i class="fa fa-youtube-play"></i></li></a> 
     </ul> 
    </div> </div> 

HTML (Navbar)

<div class="nav-container" id="navigation"> 
     <div id="genxcoders" class="navbar navbar-default " role="navigation"> 
      <div class="container-fluid"> 
       <div class="navbar-header"><a class="navbar-brand" href="#">BlueGas</a> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse navbar-menubuilder"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="active"><a href="/">Home</a></li> 
         <li><a href="/about-us">About Us</a></li> 
         <li class="dropdown"> 
          <a href="/products" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Services</a></li> 
          </ul> 
         </li> 
         <li><a href="/contact">Contact Us</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS (Statusleiste)

/* Statusleiste */

.genxcoders-status-bar { width: 100%; height: 25px;  background-color: #1976d2;  position: fixed; top: 0;  z-index: 9999; } 

.genxcoders-status-bar > .genxcoders-left, .genxcoders-status-bar > .genxcoders-center, .genxcoders-status-bar > .genxcoders-right { width: 33.33%; height: 25px; line-height: 25px;  font-size: 12px;  float: left;  text-align: center;  color: #ffffff; } 

.genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social { list-style: none; margin-left: 
-30px; } .genxcoders-status-bar > .genxcoders-right > ul.genxcoders-status-bar-social > a > li { color: #ffffff;  display: inline-block; margin: auto 10px; } 

/* Statusleiste */

CSS Navbar /* App Bar */

.nav-container { margin-top:100px;  width: 100%; height: 50px; 
     } .nav-container > #genxcoders.navbar-default .navbar-brand { 
    color: rgba(33, 33, 33, 1); } .nav-container > #genxcoders.navbar-default { 
    font-size: 15px; 
    /*background-color: rgba(255, 255, 255, 1);*/ background-color: transparent; 
    border-width: 0px; 
    border-radius: 0px; } .nav-container > #genxcoders.navbar-default .navbar-nav>li>a { 
    color: rgba(33, 33, 33, 1); 
    /*background-color: rgba(255, 255, 255, 1);*/ background-color: transparent; } .nav-container > #genxcoders.navbar-default .navbar-nav>li>a:hover, .nav-container > #genxcoders.navbar-default .navbar-nav>li>a:focus { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(3, 169, 244, 1); } .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a, .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:hover, .nav-container > #genxcoders.navbar-default .navbar-nav>.active>a:focus { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(25, 118, 210, 1); } .nav-container > #genxcoders.navbar-default .navbar-toggle { 
    border-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle:hover, .nav-container > #genxcoders.navbar-default .navbar-toggle:focus { 
    background-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle .icon-bar { 
    background-color: #1976d2; } .nav-container > #genxcoders.navbar-default .navbar-toggle:hover .icon-bar, .nav-container > #genxcoders.navbar-default .navbar-toggle:focus .icon-bar { 
    background-color: #ffffff; } 

/* App Bar */

FIDDLE

Answer 1

Es gibt eine Reihe von Problemen mit Ihrer Geige, einige ernster als andere:

• Sie jQuery über http:// statt https:// und jsFiddle blockiert es geladen werden.
• Sie überprüfen window.scrollTop() gegen #navigation.offset(), aber sie ändern #navigation s offset() mit CSS und es bewirkt, dass die Bar zwischen den Staaten flackern. Vergleichen Sie es mit einem harten Wert, wie 100px (das ist der obere Rand Ihrer #navigation, wenn es nicht behoben ist, so funktioniert es wie vorgesehen.
• Sie definieren var elementPosition außerhalb der scroll() Funktion, so dass es nicht auf Scroll aktualisiert werden
• Ihre .scroll() Funktion viel zu schwer ist. Fügen Sie einfach eine Klasse (fixed?) An #navigation an und legen Sie das gesamte CSS in eine #navigation.fixed { } Deklaration in Ihrer CSS. Ich habe diesen letzten Punkt in der aktualisierten Fiddle nicht gemacht, aber ich empfehle es sehr.
• Ihre CSS Selektoren sind viel zu stark. Verwenden Sie nur Selektoren, die stark genug sind, um angewendet zu werden, nicht stärker. Zum Beispiel stylen Sie Ihre .navbar-brand mit:

.nav-container > #genxcoders.navbar-default .navbar-brand {} 

..., aber man braucht nur einen Wähler stärker als

.navbar-default .navbar-brand {} 

Sie könnten nur #navigation .navbar-brand {} verwenden und jeweils:
#navigation.fixed .navbar-brand {}.

Ihre updated fiddle.