Как создать плавающий заголовок?

Question

Пример:

Mjnichols.net

При прокрутке вниз появляется белый заголовок, а затем исчезает при прокрутке обратно .как я могу это сделать?

Answer 1

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

    if (scroll >= 50) { 
     $(".clearHeader").addClass("fix-navbar"); 
    } else { 
     $(".clearHeader").removeClass("fix-navbar"); 
    } 
}); 

Затем создайте свой заголовок на основе класса fix-navbar. Используйте position: fixed;, чтобы сделать его «липким». класс fix-navbar будет присутствовать, если прокручивается мимо определенной точки (измените 50, чтобы изменить эту точку).

Вам также понадобится jQuery для работы вышеуказанного кода.

Answer 2

Для этого вам понадобится JavaScript, чтобы определить, когда пользователь прокручивается вниз. JQuery является излишеством, если вы просто нужна эта функциональность, но только, чтобы помочь вам получить представление, посмотреть демо: http://jsfiddle.net/sajadtorkamani/qaj6L1pk/

$(window).scroll(function() { 

if ($(this).scrollTop()>50) 
{ 
    $('#header').fadeIn(); 
} 
else 
{ 
    $('#header').fadeOut(); 
} 

});

Answer 3

Насколько я знаю, лучший способ сделать это будет с jQuery, переходы CSS3 также могут быть использованы для обеспечения плавного эффекта. Эффект может быть изменен, чтобы работать лучше всего на часовых условиях.

//Detect if document has scrolled 
 
$(window).scroll(function (e) { 
 
    var scrollAmount = 100; 
 
    //Check if user has scrolled enough 
 
    if ($(window).scrollTop() > scrollAmount) { 
 
     //Add white class 
 
     $("#header").addClass('header_white'); 
 
    } else if ($("#header").hasClass('header_white')) { 
 
     //Remove white class 
 
     $("#header").removeClass('header_white'); 
 
    } 
 
});

body { 
 
    background-color:red; 
 
} 
 
#header { 
 
    height: 40px; 
 
    font-size: 32px; 
 
    text-align:center; 
 
    background-color: transparent; 
 
    transition: background-color 0.5s ease; 
 
    position:fixed; 
 
    top:0; 
 
    width:100%; 
 
} 
 

 
.header_white { 
 
    background-color: white !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    Blah Blah 
 
</div> 
 
Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content

Answer 4

CSS:

.fix-navbar{ 
    position: fixed; 
    top: 0; 
    left:0; 
    } 

Я думаю, что это начало того, что вам нужно. Надеюсь, это поможет.