Продолжайте навигацию сверху после фонового изображения

Question

Я действительно знаю, как сохранить навигационную панель сверху, вставив в CSS position:fixed;top:0;. Но то, что я хочу, отличается от этого.

Что я хочу, когда я вставляю новый div (только для изображения) перед навигационной панелью. Поэтому, когда я открываю Интернет, я хотел бы увидеть изображение сначала, прежде чем прокручивать страницу вниз. После прокрутки изображения мы видим панель навигации. А также, когда я продолжаю прокручивать панель навигации, я хочу, чтобы панель навигации была прикреплена к верхней части страницы.

Пример того, что я имею в виду: here.

До сих пор, что я сделал, я включил .home перед навигационной панелью. Я сделал это довольно грязно. Вот кодирование ниже:

.home { 
 
min-height:400px; 
 
} 
 

 
#header-center { 
 
    margin: 0 auto; 
 
} 
 
#headerleft { 
 
    float: left; 
 
    margin: 20px; 
 
} 
 
#header, 
 
#top { 
 
    height: 80px; 
 
    background-color: #E0E0E1; 
 
    color: #FFF; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 9999; 
 
} 
 
#header p, 
 
#top p { 
 
    color: #FFF; 
 
} 
 
#header h1, 
 
#top h1 { 
 
    font-size: 20px; 
 
    margin-top: 10px; 
 
    letter-spacing: 0; 
 
} 
 
#header h1 a, 
 
#top h1 a { 
 
    font-size: 25px; 
 
    color: #FFF; 
 
    text-decoration: none; 
 
} 
 
#header h1 a:hover, 
 
#top h1 a:hover { 
 
    color: #FFF; 
 
} 
 
#headerleft h1 { 
 
    font-family: Calibri sans-serif; 
 
    font-size: 25px; 
 
    letter-spacing: 1px; 
 
} 
 
#headerleft h1 a:hover { 
 
    color: #CCC; 
 
} 
 
#nav { 
 
    float: right; 
 
} 
 
#nav-icon img { 
 
    display: none; 
 
} 
 
#nav ul li { 
 
    float: left; 
 
    list-style:none; 
 
} 
 
#nav ul li a { 
 
    font-size: 20px; 
 
    color: #FFF; 
 
    margin: 0px; 
 
    padding: 10px; 
 
    text-decoration: none; 
 
    float: left; 
 
    font-family: 'alegreya_sansregular'; 
 
    cursor: pointer; 
 
} 
 
#nav ul li a:hover { 
 
    border-bottom: 4px double #FFF; 
 
}

<div class="home"> 
 
    <img src="assets/images/wallpaper.png" /> 
 
</div> 
 

 
<div id="header"> 
 
    <div id="header-center"> 
 
    <div id="headerleft"> 
 
     <h1> <a href="#"> LOGO </a> </h1> 
 
    </div> 
 

 
    <div id="nav"> 
 
     <a href="" id="nav-icon"> 
 
     <img src="assets/images/navigation.png" alt="nav-menu"> 
 
     </a> 
 
     <ul> 
 
     <li> <a class="link-nav" data-scroll-nav="0"> HOME </a> 
 
     </li> 
 
     <li> <a href="works"> WORKS </a> 
 
     </li> 
 
     <li> <a data-scroll-nav="1"> ABOUT </a> 
 
     </li> 
 
     <li> <a data-scroll-nav="2"> CONTACT </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Можете ли вы сказать мне, что случилось с моим кодом? Благодарю.

Answer 1

Вы можете сначала установить заголовок в положение: relative в css. Затем вы должны добавить jquery или javascript, чтобы сказать - когда вы прокручиваете позицию вертикальной (y) 400px, измените позицию: по отношению к позиции: зафиксировано. Обычно это работает.

Чтобы ответить на комментарий, вы можете добавить стиль CSS:

.fixedPosition { 
    position:fixed !important; 
    top: 0; 
    left: 0; 
} 

Затем добавить JQuery (не забудьте поставить библиотеку и готовую функцию документа, если это необходимо):

$(window).scroll(function() { 
    var y = $(window).scrollTop(); 

    if (y > 400) {  
     $('#header').addClass('fixedPosition'); 
    } else { 
     $('#header').removeClass('fixedPosition'); 
    } 
}); 

Вот FIDDLE

Answer 2

Как насчет того, чтобы установить заголовок быть position: relative; по умолчанию, а затем в JA vascript обнаруживает, если он попадает в верхнюю область просмотра:

$(window).on("scroll", function(){ 
    if (document.getElementById('sticky-header').getBoundingClientRect().top < 1){ 
    $('#sticky-header').css({'position':'fixed','top':'0'}); 
    } 
    // add code for reverse when you scroll up 
    // ... 
});