html - 在固定导航栏顶部添加图像横幅

我正在尝试使用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解决此问题有帮助吗？谢谢

最佳答案

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

关于html - 在固定导航栏顶部添加图像横幅，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42335791/