Прилипающая шапка
Лендинг. Как сделать прилипающую шапку после скроллинга вниз на следующую страницу? И она должна подсвечивать ту ссылку, на которой странице мы находимся.
Лендинг. Как сделать прилипающую шапку после скроллинга вниз на следующую страницу? И она должна подсвечивать ту ссылку, на которой странице мы находимся.
http://jsfiddle.net/yt8k7dhk/ - вот еще пример
Для подсвета ссылок нужно выделить css-класс, который будет как-то выделять её,
<\a class = "selected">Текущее положение<\/a>
Для определения, на какой мы странице, можно просто по логике вывести тупую до ужаса конструкцию 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 и тому подобные.
Для одностраничной навигации можно использовать этот плагин.
А для фиксирования при скролле можно вот так:
$(window).scroll(function() {
var $block = $('#block');
if($(window).scrollTop() > $block.offset().top) {
$block.addClass('fixed');
} else {
$block.removeClass('fixed');
}
});
Разумеется, в CSS нужно написать стили для класса fixed, чтобы зафиксировать нужный вам блок.