Три варианта фиксации элемента на сайте на CSS/jQuery
Фиксирование элементов сейчас пользуется большой популярностью. Так, например, «Яндекс» или социальная сеть «ВКонтакте» (на момент написания статьи) фиксируют свое меню и поиск при прокрутке страницы. Вполне хорошее решение, позволяющее ограничить пользователя от лишних действий в получении доступа к нужному функционалу сайта и позволяющее сделать некий акцент на важных элементах.
Зафиксировать элемент на сайте можно несколькими способами, каждый из них хорош в своем случае.
Фиксация элемента на сайте на CSS
Самый простой вариант – это фиксация элемента на чистом CSS. Все, что вам нужно, это добавить следующие стили к элементу:
position: fixed;
top: 0;
left: 0;
right: 0;Положение в таком случае будет верхнее, по всей ширине экрана. Вариант отлично подходит для элементов, которые изначально находятся в самом верху (меню и поиск).
Если хотите поиграть с положением – измените значение свойств left, top, right и bottom соответственно.
Минусы – не подходит для элементов, находящихся ниже верхней границы сайта.
Здесь на помощь к нам приходит другое значение position – sticky. Оно фиксирует тот или иной элемент только в рамках первого родительского контейнера. Фиксация элемента при этом начнется тогда, когда верхняя граница элемента совпадет с верхней частью окна браузера, и завершится при достижении элементом конца родителя, при этом другие элементы (и даже окружаемый текст) не смещаются, что очень удобно в отдельно взятых случаях. Пример использования:
position: sticky;
top: 10px;Эти стили вы присваиваете тому элементу, который хотите зафиксировать. Свойство top со значением «10px» говорит здесь о том, что при фиксации элемента необходимо сделать отступ от верхней границы в 10 пикселей.
Фиксация элемента на сайте при прокрутке страницы на jQuery
Этот вариант, в отличие от первого, фиксирует нужный вам элемент только тогда, когда его положение равняется верхней границе вашего экрана при прокрутке страницы.
Реализация:
<script>
$(document).ready(function() {
var element = $(".fixed_block");
var height_el = element.offset().top;
$(".fixed_block_position").css({
"width": element.outerWidth(),
"height": element.outerHeight()
});
$(window).scroll(function() {
if($(window).scrollTop() > height_el) {
element.addClass("fixed");
} else {
element.removeClass("fixed");
}
});
});
</script>«.fixed_block» здесь – это класс элемента, который нужно зафиксировать при прокрутке, а «.fixed_block_position» - класс обертки.
Простой пример:
<div class="fixed_block_position">
<div class="fixed_block">
Ваше содержимое для фиксации. Ссылки, текст, изображение и прочее.
</div>
</div>И стили:
<style>
.fixed {
position: fixed;
z-index: 99;
top: 0;
}
</style>Их вы вставляете без изменений. Отличный вариант для фиксации рекламных блоков или других элементов находящихся не в первых рядах.
Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery
Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки. Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем.
Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.
Реализация:
<script>
$(document).ready(function() {
var element = $(".fixed_block");
var height_el = element.offset().top;
var element_stop = $(".fixed_block_stop");
var height_el_stop = element_stop.offset().top;
$(".fixed_block_position").css({
"width": element.outerWidth(),
"height": element.outerHeight()
});
$(window).scroll(function() {
if($(window).scrollTop() > height_el_stop - element.outerHeight() - 20) {
element.css({
"top": element.offset().top,
"left": element.offset().left
}).removeClass("fixed").addClass("absolute");
} else {
if($(window).scrollTop() > height_el) {
element.addClass("fixed").removeClass("absolute").attr("style", "");
} else {
element.removeClass("fixed absolute").attr("style", "");
}
}
});
});
</script>Ну и те же стили из второго варианта с небольшим дополнением:
<style>
.fixed {
position: fixed;
z-index: 99;
top: 0;
}
.absolute {
position: absolute;
z-index: 99;
}
</style>На что здесь стоить обратить внимание?
«.fixed_block» – это элемент, который мы фиксируем при прокрутке. «.fixed_block_position» - класс обертки, а «.fixed_block_stop» – это элемент (граница), достигнув которую элемент остановит свое движение (фиксацию).
