Создание позиции div: фиксировано только после прокрутки до

Question

У меня есть div, который составляет 100% высоты видового экрана в качестве посадочного изображения для страницы, после того, как пользователь прокручивает список навигации, после прокрутки div чтобы я хочу, это положение, чтобы быть прикреплен к верхней части страницы, с этой точки в.

<div class="landing-panel" id="introduction"> 
    <h1>Site Title</h1> 
</div> 

    <div class="navigation"> 
     <ul> 
      <li>NavItem1</li> 
      <li>Navitem2</li> 
     </ul> 
    </div> 


div.landing-panel{/* Unique landing panel */  
    height:100vh; 
    background-image: url('../img/landing-panel-background.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
} 

div.navigation{ 
    height:10vh; 
    background-color: orange; 
    z-index: 999; 
    position: fixed; 
    top:100vh; 
    width:100%; 
} 

Answer 1

Я думаю, что вам нужно использовать JQuery для этого. Сначала вы обнаружите, что есть прокрутка, а затем добавьте правильный класс в div, который вы хотите сохранить фиксированным.

EDIT

Добавлен var sticky = "sticky", который определяет явно имя класса.

var hdr = 150; 
var sticky = "sticky"; 
$(window).scroll(function() { 
    if($(window).scrollTop() > hdr) { 
    $(".your-div").addClass(sticky); 
    } else { 
    $(".your-div").removeClass(sticky); 
    } 
}); 

Где .sticky класс с любыми CSS свойства, которые вы хотите.