Как сделать div в том же положении, а затем исчезнуть в определенном месте

Question

Так что мне интересно, как вы можете сделать div в определенный момент страницы и остаться в том же месте, пока не достигнете конкретная точка страницы

вроде как они есть на http://www.squarespace.com где вы видите экран IMAC, который остается на экране, пока не достигнет определенной точке

это может быть сделано без использования JS в любом случае кто-то может позволить мне секрет производства?

Answer 1

Я предполагаю, что вы имеете в виду сделать Div показать, когда пользователь имеет прокручивается к определенной точке на странице, а затем исчезают, когда они прокрутки к другой точке.

Это не технически возможно с помощью CSS. Возможно, есть способ сделать это похожим на другие элементы, покрывающие его, но сейчас я сосредоточусь на том, чтобы сделать это с JS.

По сути, вы хотите

// set up limits for show/hide 
var SHOW_Y = 100, 
    HIDE_Y = 800; 

// function to be called every time 
// the page is scrolled 
function scrolled() { 
    if(window.scrollTop < SHOW_Y) { 
    hide(this); 
    } else if(window.scrollTop < HIDE_Y) { 
    show(this); 
    } else { 
    hide(this); 
    } 
} 

// helper function which hides an element 
function hide(element) { 
    element.style.display = 'none'; 
} 

// helper function which shows an element 
function show(element) { 
    element.style.display = 'block'; 
} 

window.addEventListener('load', function() { 
    var element = document.getElementById('your-element'); 
    window.addEventListener('scroll', scrolled.bind(element)); 
}); 

я бы, вероятно, сделать это с помощью классов CSS, а не display свойств для того, чтобы управлять таким образом, что элемент исчезает и вновь появляется, но это должно дать вам некоторое представление.

Answer 2

Вы также можете использовать скрипт, например Skrollr или ScrollMagic.