В статье представлены способы зафиксировать блок при прокрутки страницы с примерами для горизонтального меню и баннера в колонках сайта.
Метод основан на CSS-свойстве position: fixed и методе JQuery $(window).scroll().
<div class="fixed-box"> нужен для того чтобы не прыгали блоки, которые следуют за ним и он должен быть с фиксированной высотой.
<div class="fixed-box">
<div class="fixed-div">
Код меню или баннера...
</div>
</div>$(function(){
$nav = $('.fixed-div');
$nav.css('width', $nav.outerWidth());
$window = $(window);
$h = $nav.offset().top;
$window.scroll(function(){
if ($window.scrollTop() > $h) {
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
});
});.fixed-box {
height: 60px;
}
.fixed-div {
height: 60px;
}
.fixed {
position: fixed;
z-index: 9999;
top: 0;
}HTML разметка
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div class="fixed-box">
<div class="fixed-div">
Код меню или баннера...
</div>
</div>
<p>...</p>
</body>
</html>JS
$(function(){
$nav = $('.fixed-div');
$nav.css('width', $nav.outerWidth());
$window = $(window);
$h = $nav.offset().top;
$window.scroll(function(){
if ($window.scrollTop() > $h){
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
});
});Стили
.fixed-box {
height: 40px;
}
.fixed-div {
height: 20px;
text-align: center;
background: #FFA500;
padding: 10px 0;
}
.fixed {
position: fixed;
z-index: 9999;
top: 0;
}Результат
HTML разметка
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div class="rows">
<div class="left-col">
<p>...</p>
</div>
<div class="right-col">
<p>Правая колонка</p>
<div class="fixed-box">
<div class="fixed-div">
Код меню или баннера...
</div>
</div>
</div>
</div>
</body>
</html>JS
$(function(){
$nav = $('.fixed-div');
$nav.css('width', $nav.outerWidth());
$window = $(window);
$h = $nav.offset().top;
$window.scroll(function(){
if ($window.scrollTop() > $h) {
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
});
});Стили
.rows {
overflow: hidden;
}
.left-col {
width: 60%;
float: left;
text-align: justify;
}
.right-col {
margin-left: 65%;
}
.fixed-box {
height: 200px;
}
.fixed-div {
height: 180px;
text-align: center;
background: #FFA500;
padding: 10px 0;
}
.fixed {
position: fixed;
z-index: 9999;
top: 0;
}Результат
В Bootstrap реализован плагин affix – http://getbootstrap.com/javascript/#affix
Включить его можно добавив атрибуты к тегу:
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
Код баннера...
</div>Или через JS:
<div id="myAffix">
Код баннера...
</div>
<script>
$(function(){
$('#myAffix').affix({
offset: {
top: 60,
bottom: 60
}
});
});
</script>
