2015-03-12 2 views
0

Мне нужно остановить фиксированную боковую панель, когда нижний колонтитул достигнут. У меня есть код ниже, но если вы прокрутите вниз, боковая панель перейдет через нижний колонтитул, когда вы достигнете его. Конечно, он будет прикреплен к началу снова при прокрутке вверх. Любая помощь?jQuery: от верхнего фиксированного до нижнего фиксированного при достижении нижнего колонтитула

$(window).scroll(function() { 
 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 210) { 
 
     alert ("footer reached!"); 
 
     $('.sidebar').css({ 
 
     position: 'fixed', 
 
     bottom: 210, 
 
     }) 
 
     
 
    } else { 
 
     
 
     $('.sidebar').css({ 
 
     position: 'fixed', 
 
     top: 0 
 
    }) 
 
    } 
 
});
.body { 
 
    overflow: hidden; 
 
    height: 1000px; 
 
} 
 

 
.sidebar { 
 
    height: 400px; 
 
    width: 200px; 
 
    background: red; 
 
    float: left; 
 
} 
 

 

 
.footer { 
 
    height: 200px; 
 
    background: blue; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<div class="body"> 
 
    <div class="sidebar"></div> 
 
</div> 
 
<div class="footer"></div>

ответ

0

Извлекает JQuery плагин ScrollToFixed. Он делает именно это для вас. Я использовал его с довольно хорошим успехом.

Код: https://github.com/bigspotteddog/ScrollToFixed

Демонстрационная страница: http://bigspotteddog.github.io/ScrollToFixed/

Кроме того, если вы оказываетесь с помощью Bootstrap, у них есть что-то подобное, я считаю, под названием "Affix".

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