修復引導導航欄頂部的滾動

Question

1. 我有一個div (named=status bar)在頁面的頂部，height = 25px，top:0和position: fixed。
2. 我想在這個狀態欄下面放置一個引導navbar（帶有透明背景）100px。
3. 當滾動頁面時，沿navbar滾動，觸動狀態欄和： 3.1。在狀態欄下方修復。 3.2。將其背景顏色更改爲red (#ff0000)。 3.3。頁面的其餘部分向下滾動。
4. 當頁面向上滾動時，navbar和狀態欄的位置保持固定，直到滾動達到幾乎到達瀏覽器的頂部。
5. 當到達瀏覽器的頂部時，狀態欄將保持其位置，如＃1所示。並且navbar滾動並在狀態欄中設置爲距離100px。

HTML（狀態欄）

<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（導航欄）

<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（狀態欄）

/*狀態欄*/

.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; } 

/*狀態欄*/

CSS導航欄 /*應用程序欄*/

.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; } 

/*應用程序欄*/

FIDDLE

Answer 1

有許多與你撥弄問題，有些比其他人更嚴重：

• 要加載的jQuery在http://而不是https://和的jsfiddle阻止它。
• 您正在檢查window.scrollTop()針對#navigation.offset()，但您更改#navigation s offset()使用CSS並且它會導致條狀態在狀態之間閃爍。將其與100px（它不是固定的#navigation的邊界頂部）進行比較，然後按照預期工作。
• 定義var elementPosition的scroll()功能之外，因此它不會對滾動更新
• 您.scroll()功能手法過重。只需將一個類（fixed？）附加到#navigation，並將所有CSS放入#navigation.fixed { }聲明中，然後放入您的CSS。我還沒有在更新的小提琴中完成這最後一點，但我強烈推薦它。
• 你的CSS選擇器太強大了。只能使用足夠強大的選擇器，而不能使用更強大的選擇器。例如，你的風格你.navbar-brand使用：

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

...，但是你只需要選擇強於

.navbar-default .navbar-brand {} 

你可以只使用#navigation .navbar-brand {}和，分別爲：
#navigation.fixed .navbar-brand {}。

您的updated fiddle。