Фиксация элементов с помощью jQuery и CSS(sticky position)

Фиксация элементов с помощью jQuery и CSS(sticky position)

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

В этой статье мы рассмотрим 2 варианта как это реализовать.

Метод 1. jQuery

В этом примере мы создадим простую веб-страницу, которая состоит из заголовка, навигации и контента.

Шаг 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

    $(document).ready(function() {  
    var stickyNavTop = $('.nav').offset().top;  
      
    var stickyNav = function(){  
    var scrollTop = $(window).scrollTop();  
           
    if (scrollTop > stickyNavTop) {   
        $('.nav').addClass('sticky');  
    } else {  
        $('.nav').removeClass('sticky');   
    }  
    };  
      
    stickyNav();  
      
    $(window).scroll(function() {  
        stickyNav();  
    });  
    });  

Наконец, можно увидеть демо-версию того что получилось.

 

Метод 2. CSS

Недавно разработчики Chrome, представили новую функцию, для определения элементам фиксированной позиции, она называется просто sticky (липкий). Она выполняет по сути ту же функцию что и код JQuery который мы написали выше. Однако это значение по прежнему определяется как экспериментальная функция, поэтому мы должны её сначала включить:

Если ваша версия Chrome является 23 или выше, в поле адресной строке введите:  chrome://flags.

flags_chrome

Затем, найдите раздел «Включить экспериментальные функции WebKit». Включаем.

experiments_webkit

В стилях, мы просто устанавливаем нашей навигации позицию sticky. Но, она будет работать только с префиксом WebKit.

    .nav {  
        position: -webkit-sticky;  
        top: 0;  
        z-index: 1;  
    }  

Теперь, навигация должна действовать таким же образом, как мы это делали с JQuery.

comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter