在固定的导航栏上添加图像横幅

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。