Общие задачи и решения к ним

Шаблоны: фиксированная позиция меню или колонтитула

Подробности

Категория: Общие задачи и решения к ним

Обновлено 22.01.2018

Задача в том, чтобы меню или колонтитул "прилипали" на странице и оставались видимыми при прокрутке страницы вверх. В этом случае элемент остаётся на своей позиции и всегда находится в области видимости. Решим эту задачу с помощью jQuery и CSS(sticky position)

Шаг 1. HTML разметка

<div class="wrapper"> 
    <div class="header"> 
        Header 
    </div> 
    <div class="nav"> 
        Navigation 
    </div> 
    <div class="content"> 
        <p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll  
        applicake pastry. ...</p> 
    </div> 
</div>

Шаг 2. Css стили

.sticky { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: 100; 
    border-top: 0; 
}

Шаг 3. jQuery

<script type="text/javascript">
$(document).ready(function() {
// grab the initial top offset of the navigation
var stickyNavTop = $('.nav').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var stickyNav = function(){
var scrollTop = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
// and run it again every time you scroll
$(window).scroll(function() {
stickyNav();
});
});
</script>