Добавить изображение баннера поверх фиксированной панели навигации

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

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

Решение Javascript заключается в использовании scrollTop определить, как далеко пользователь прокрутил, и переключить класс, который применяется position: fixed

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');
  }
})

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

Обновлена ​​скрипка.

Обратите внимание, что в настоящее время (февраль 2017 г.) позиция закрепления не поддерживается Edge или браузером Android, см. Таблицу совместимости здесь.