Прилипающая шапка

Рейтинг: 0Ответов: 3Опубликовано: 30.01.2015

Лендинг. Как сделать прилипающую шапку после скроллинга вниз на следующую страницу? И она должна подсвечивать ту ссылку, на которой странице мы находимся.

Ответы

▲ 2

http://jsfiddle.net/yt8k7dhk/ - вот еще пример

▲ 1
  1. Для подсвета ссылок нужно выделить css-класс, который будет как-то выделять её,

    <\a class = "selected">Текущее положение<\/a>

  2. Для определения, на какой мы странице, можно просто по логике вывести тупую до ужаса конструкцию PHP:

// К примеру, для определенной страницы мы определенным образом подставляем значение переменной $var . Тогда выходит как-то так

\<a <?php if ($var == 'value'){ echo 'class = "selected" '; } ?> href = ""> Страница</a>

По поводу шапки, современные браузеры поддерживают такую интересную штуку в CSS, как position:sticky.

Как пример:

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

Но тут всё-таки могут выйти траблы с поддержкой, ибо черт его знает, какой у конечного юзера браузер, так что лучше использовать какие-нибудь библиотеки, как jQuery Sticky-Kit и тому подобные.

▲ 1

Для одностраничной навигации можно использовать этот плагин.

А для фиксирования при скролле можно вот так:

$(window).scroll(function() {
    var $block = $('#block');

    if($(window).scrollTop() > $block.offset().top) {
        $block.addClass('fixed');
    } else {
        $block.removeClass('fixed');
    }
});

Разумеется, в CSS нужно написать стили для класса fixed, чтобы зафиксировать нужный вам блок.