HTML/CSS Элементы исчезают при прокрутке.

Question

Если бы кто-нибудь мог сказать мне, как этот сайт достигает исчезновения логотипа, как только пользователь начнет прокручивать, это было бы высоко оценено! Если вы посмотрите на логотип в левом верхнем углу, как только вы начнете прокручивать его, он исчезнет. Какую технику это называют? Это делается с помощью javascript?

http://www.studionudge.com/

Заранее спасибо!

Answer 1

Вы можете просто сделать css свойство исправлено.

Eample:

<div id="main"> 
    Test Content 
</div> 

<div id="content"> 
    Add some more content here for result. 
</div> 

<style type="text/css"> 
    #main { 
    width: 100%; 
    height: 60px; 
    background: green; 
    position: fixed; 
    z-index: 1000; /* Z-Index for making this div always on top */ 
    } 

    #content { 
    width: 960px; margin:0 auto; position: relative; background: blue; 
    } 

</style> 

Answer 2

№. Логотип размещен внутри «нормальный» контейнер, который прокручивается вместе с остальной частью страницы; меню вместо этого находится в «фиксированный» один, который не прокручивается. Кроме того, трюк используется для отображения логотипа поверх меню и содержимого веб-сайта позади него. Очень приятный эффект, которого я никогда раньше не видел.

Basic HTML/CSS код и рабочий пример: http://jsfiddle.net/cs7Nk/ :-)

Answer 3

Я считаю, что происходит, это заголовок имеет свойство background-attachment набор для scroll.

Логотип не входит в заголовок (он просто сидит сверху z-index), поэтому он не получает эффект прокрутки.