在固定的導航欄上添加圖像橫幅

Question

我試圖用JS推動圖像橫幅的頁面頂部。我面臨的問題是固定導航欄。我的目標是將導航欄放在圖像橫幅下，但是當您向下滾動圖像橫幅時，導航橫幅應該再次固定在頁面頂部。

這裏是HTML代碼（DIV .TOP橫幅可能也放在包裝外面如果是比較容易/更好）

<div class="wrapper"> 
    <div class="top-banner"> 
    <img src="https://b2b.bbanner.co.uk/Content/images/banner.jpg" /> 
    </div> 
    <nav id="nav"> 
    <h1>Navbar</h1> 
    </nav> 
    <h1>Content</h1> 
</div> 

CSS：

#nav { 
    background: #f9f9f9; 
    margin: 0 0 0 133px; 
    position: fixed; 
    top: 0; 
    background-color: black; 
    height: 51px; 
    display: table; 
    min-width: 762px; 
} 

.top-banner { 
    width: 100%; 
    position: relative; 
} 

JSFIELD：https://jsfiddle.net/3nu16e59/

任何幫助如何解決這個問題與CSS？謝謝

Answer 1

一個JavaScript解決方案是使用scrollTop檢測多遠用戶滾動，並切換適用position: fixed

var banner = document.getElementById('banner'), 
 
\t threshold = banner.offsetTop + banner.clientHeight, 
 
    nav = document.getElementById('nav'); 
 
window.addEventListener('scroll',function() { 
 
    var scrolled = document.body.scrollTop; 
 
    if (scrolled >= threshold) { 
 
    \t nav.classList.add('fixed'); 
 
    } else { 
 
    \t nav.classList.remove('fixed'); 
 
    } 
 
})

#nav { 
 
    padding: 0; 
 
    background: #f9f9f9; 
 
    margin: 0 0 0 133px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-color: black; 
 
    height: 51px; 
 
    font-size: 0; 
 
    border-top: 0; 
 
    display: table; 
 
    min-width: 762px; 
 
} 
 
#nav.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.top-banner img { 
 
    display: block; 
 
}

<div class="top-banner" id="banner"> 
 
    <img src="https://b2b.bbanner.co.uk/Content/images/banner.jpg" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <nav id="nav"> 
 
    <h1>Navbar</h1> 
 
    </nav> 
 
    <h1>Content</h1> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    
 
    
 
    </p> 
 
</div>

Answer 2

(function ($) { 
    $(document).ready(function(){ 

    // hide .navbar first 
    $("#nav").hide(); 

    // fade in .navbar 
    $(function() { 
     $(window).scroll(function() { 
      // set distance user needs to scroll before we fadeIn navbar 
      if ($(this).scrollTop() > 100) { 
       $('#nav').fadeIn(); 
      } else { 
       $('#navr').fadeOut(); 
      } 
     }); 


    }); 

}); 
    }(jQuery)); 

類添加這個jQuery和嘗試。您可以從固定到粘script標籤

Answer 3

既然你問到了對CSS的解決方案中嵌入此，不僅僅是改變導航位置屬性：

#nav { 
 
    padding: 0; 
 
    background: #f9f9f9; 
 
    margin: 0 0 0 133px; 
 
    position: sticky; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    top: 0; 
 
    background-color: black; 
 
    height: 51px; 
 
    font-size: 0; 
 
    border-top: 0; 
 
    display: table; 
 
    min-width: 762px; 
 
} 
 

 
.top-banner { 
 
    width: 100%; 
 
    position: relative; 
 
}

<div class="top-banner"> 
 
    <img src="https://b2b.bbanner.co.uk/Content/images/banner.jpg" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <nav id="nav"> 
 
     <h1>Navbar</h1> 
 
    </nav> 
 
    <h1>Content</h1> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
    <p>Scrolling</p> 
 
</div>

Updated Fiddle。

請注意，在這個時候（2017年2月），粘性位置不被Edge或Android瀏覽器支持，請檢查compatibility table here。