Нижний колонтитул нижний колонтитул

Question

У меня есть два нижних колонтитула внизу моей страницы. Я хочу, чтобы один из них всегда был исправлен, затем, когда я прокручиваю нижнюю часть, я хочу, чтобы другой всплывал под ним, поэтому в основном, когда я добираюсь до нижней части страницы, «нормальный» нижний колонтитул должен находиться под фиксированным нижним колонтитулом. Вот что я до сих пор использую класс bootstrap на navbar, чтобы исправить его до конца. Итак, что теперь делает этот код, когда я достигаю дна, фиксированный нижний колонтитул - нижний нижний колонтитул, я хочу, чтобы он был наоборот.

<footer class="footer" role="footerinfo"> 
    <div class="navbar navbar-default navbar-fixed-bottom"> 
     <div class="container"> 
     <div class="col-sm-12"> 
      //When I reach the bottom this shoud be top footer 
     </div> 
     </div> 
    </div> 
<div class="wrapper"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-12"> 
      //Should not be fixed, be below fixed 
      </div> 
     </div> 
     </div> 
    </div> 
</footer> 

Любой знает, какой CSS стиль мне нужно, чтобы исправить эту

Answer 1

Я собрал решение, которое не использует javascript. Это то, что ты искал?

https://jsfiddle.net/j611yLem/3/

Вот CSS я использовал:

body { 
    padding: 0; 
    margin: 0; 
} 

.container { 
    position: relative; 
    padding-bottom: 40px; 
} 

.first-footer { 
    position: fixed; 
    bottom: 0; 
    background: red; 
    left: 0; 
    right: 0; 
    padding: 10px; 
    color: #FFF; 
} 

.second-footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    background: blue; 
    padding: 10px; 
    color: #FFF; 
} 

По сути, у вас есть первая сноска быть зафиксирована в положении, а вторая сноска абсолютно позиционирована на дно контейнера.

Я не был уверен, что вы имели в виду расположение на верхней части нижнего колонтитула (скрывая его) или чуть выше. Если вы хотите, чтобы второй нижний колонтитул перекрывал первый, измените нижнее заполнение контейнера на 0px.

Answer 2

Я думаю, вопрос этого человека может помочь вам сделать именно это: Stop fixed position at footer

В основном сноска остается фиксированным, пока это не в определенный диапазон css изменится на абсолютный. Взгляните на live demo из самого высокого ответа.

Проверьте смещение при прокрутке:

$(document).scroll(function() { 
    checkOffset(); 
}); 

Сделать положение абсолютного в пределах определенного диапазона, вам нужно настроить это самостоятельно.

function checkOffset() { 
    if($('#social-float').offset().top + $('#social-float').height() 
             >= $('#footer').offset().top - 10) 
     $('#social-float').css('position', 'absolute'); 
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) 
     $('#social-float').css('position', 'fixed'); // restore when you scroll up 
} 

И все, что вы используете вместо # социал- поплавка должен быть родственником сноски:

<div class="social-float-parent"> 
    <div id="social-float"> 
     something... 
    </div> 
</div> 
<div id="footer"> 
</div> 

Я надеюсь, что это помогает. Их вопрос очень похож на ваш, поэтому я не хотел повторно изобретать решение.