Исправьте нижний колонтитул снизу только при прокрутке вниз

Question

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

Если вы заметили на iOS 8 или OS X Mavericks/Yosemite в Safari, когда вы прокручиваете страницу за пределы страницы, отображается больше контента, чтобы получить эффект упругого отскока назад. Это выглядит действительно фантастически, когда у вас есть фиксированный заголовок, он просто отображает больше фона выше верхней части вашей страницы, в то время как заголовок полностью исправлен, как и в родных приложениях.

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

Это то, что я хочу изменить - заметьте, что белый появляется под нижним колонтитулом после прокрутки конца страницы. Если нижний колонтитул зафиксирован снизу, это не произойдет, и вместо этого над ним будет добавлено пробелы.

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

JSBin Code

Является ли это работа для position:sticky? Я бы предпочел только CSS-решение для JavaScript/jQuery.

Answer 1

Это должно работать ... !! Удачи !!

#footer { 
position:fixed; 
left:0px; 
bottom:0px; 
height:30px; 
width:100%; 
background:#999; 
} 

/* IE 6 */ 
* html 

#footer 
{ 
position:absolute; 
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
}