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

Question

我正在尝试使用JS在页面顶部推送图像横幅。我面临的问题是固定导航栏。我的目标是将导航栏放在图像横幅下面，但当您向下滚动图像横幅时，导航横幅应再次固定在页面顶部。

这是HTML代码（如果更容易/更好，div .top-banner也可以放在包装器之外）

<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的类

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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并尝试。您可以将其嵌入脚本标记

中

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。