фиксированный div наложения/скрыть следующий div

Мне нужно иметь 2 нижних колонтитула. Первый нижний колонтитул должен быть зафиксирован как прокрутка страницы, так как свиток достигает конца страницы, нижний колонтитул 1 должен располагаться/располагаться перед нижним колонтитулом2.фиксированный div наложения/скрыть следующий div

<html> 
    <head> 
    <style> 
    body{ 
     margin: 0; 
    } 
    #header{ 
     height: 100px; 
     background: orange; 
    } 
    #body{ 
     height: 10000px; 
     background: white; 
    } 
    #footer1{ 
     height: 100px; 
     background: darkblue; 
    } 
    .footer-sticky{ 
     position: fixed; 
     bottom: 0; 
     right: 0; 
     left: 0; 
     background: pink; 
    } 
    #footer2{ 
     height: 100px; 
     background: green; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="header"></div> 
    <div id="body"></div> 

    <div id="footer1" style="position:fixed;bottom: 0;right: 0;left: 0;background: black;height:50px;color:white;">footer1</div> 
    <div id="footer2" style="">footer2</div> 
    </body> 

    </html>

Программа включает в себя 2 footer.The первый сноска должна быть исправлена, как страница прокручивается, а свиток достигает конца страницы, footer1 успокоились/ставится перед footer2.
Вот jsfiddle ссылку http://jsfiddle.net/dLe5cv4j/

источник

2015-11-27 Swati Jain

Возможно, вам нужно немного javascript: http://jsfiddle.net/5v18x1yk/ –

#footer1{ 
    margin-bottom:100px; 
    height: 100px; 
    background: darkblue; 
}

редактировать и попробовать.

источник

2015-11-27 07:57:49

Проблема решена! –

Добавить в ваших стилей может работать вам

#footer1 
{ 
z-index: 1; 
} 

#footer2 
{ 
position: relative; 
z-index: 2; 
}

источник

2015-11-27 07:59:05

Проблема решена! –

добавить position: relative; к телу и вставить эту JavaScript в конце (или внутри загрузки страницы событий)

var f1 = document.getElementById("footer1"); 
var f2 = document.getElementById("footer2"); 
window.addEventListener("scroll", function(){ 
    if (document.body.scrollTop + window.innerHeight > 
     document.body.scrollHeight - f2.clientHeight) { 
     f1.style.position = "absolute"; 
     f1.style.bottom = f2.clientHeight+"px"; 
    } 
    else{ 
     f1.style.position = "fixed"; 
     f1.style.bottom = "0px"; 
    } 
});

Результат: http://jsfiddle.net/Lkuy0ext/

источник

2015-11-27 08:14:47 Saba

Это прекрасно работает ... ':)' –

фиксированный div наложения/скрыть следующий div

ответ

Смежные вопросы