Документация бутстрапа по этой теме немного сбивает меня с толку. Я хочу добиться аналогичного поведения, например, в документах с аффикс-навигатором: навигационная панель находится под заголовком абзаца/страницы, а при прокрутке вниз она должна сначала прокручиваться, пока не дойдет до верхней части страницы, а затем зафиксировать ее для дальнейших прокруток.
Поскольку jsFiddle не работает с концепцией navbar, я установил отдельную страницу для использования в качестве минимального примера: http://i08fs1.ira.uka.de/~s_drr/navbar.html
Я использую это как свой навигатор:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
Я думаю, я бы хотел, чтобы data-offset-top
имел значение 0 (поскольку панель должна "прилипать" к самой вершине ", но с 50 есть, по крайней мере, некоторый эффект, который можно наблюдать.
Если также поставить код javascript на место:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Любая помощь была оценена.
У меня была аналогичная проблема, и я считаю, что нашел улучшенное решение.
Не беспокойтесь, указав data-offset-top
в своем HTML. Вместо этого укажите это, когда вы вызываете .affix()
:
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
Преимущество в том, что вы можете изменить макет своего сайта, не обновляя атрибут data-offset-top
. Так как это использует фактическое вычисленное положение элемента, это также предотвращает несоответствия с браузерами, которые делают элемент в несколько иной позиции.
Вам все равно нужно закрепить элемент вверху с помощью CSS. Кроме того, мне пришлось установить width: 100%
на элемент nav, так как .nav
элементы с position: fixed
неверно ошибочны:
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
Последнее: когда прикрепленный элемент фиксируется, его элемент больше не занимает места на странице, в результате чего элементы под ним "прыгают". Чтобы предотвратить это уродство, я обертываю навигационную панель в div
, высота которой я устанавливаю равной navbar во время выполнения:
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$('#nav-wrapper').height($("#nav").height());
Просто реализовано это в первый раз, и вот что я нашел.
Значение data-offset-top
- это количество пикселей, которые вы должны прокручивать, чтобы эффект прикрепления имел место. В вашем случае, прокручивается 50px
, класс вашего элемента изменяется с .affix-top
на .affix
. Вероятно, вы захотите установить data-offset-top
примерно 130px
в вашем случае использования.
После этого изменения класса вы должны поместить свой элемент в css, создав позиционирование для класса .affix
. Bootstrap 2.1 уже определяет .affix
как position: fixed;
, поэтому все, что вам нужно сделать, это добавить свои собственные значения позиции.
Пример:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
.navbar
сохранен - вы уверены?
Чтобы исправить эту проблему, я изменил плагин аффикса, чтобы испустить событие jQuery, когда объект прикреплен или не привязан.
Вот запрос на растяжение: https://github.com/twitter/bootstrap/pull/4712
И код: /bootstrap-affix.js
И затем сделайте это, чтобы прикрепить navbar:
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>
Вам нужно удалить .affix()
из script.
Bootstrap дает возможность выполнять вещи либо с помощью data-attributes
, либо с помощью обычного JavaScript.
У меня есть это из исходного кода twitterbootstrap, и он работает очень хорошо:
HTML:
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS:
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
Благодаря namuol и Dave Kiss для решения.
В моем случае у меня была крошечная проблема с высотой и шириной навигатора, когда я использовал слияние и сглаживание плагинов. Проблема с шириной может быть легко решена, наследуя ее от родительского элемента (контейнер в моем случае). Кроме того, мне удалось заставить его сглаживаться с небольшим количеством javascript (на самом деле, coffeescript). Хитрость заключается в том, чтобы установить высоту обертки до auto
, прежде чем произойдет сбой переключения и закрепите его после.
Разметка (haml):
#wrapper
#navbar.navbar
.navbar-inner
%a.btn.btn-navbar.btn-collapse
%span.icon-bar
%span.icon-bar
%span.icon-bar
#menu.nav-collapse
-# Menu goes here
CSS
#wrapper {
width: inherit;
}
#navbar {
&.affix {
top: 0;
width: inherit;
}
}
CoffeeScript:
class Navigation
@initialize: ->
@navbar = $('#navbar')
@menu = $('#menu')
@wrapper = $('#wrapper')
@navbar.affix({offset: @navbar.position()})
@adjustWrapperHeight(@navbar.height())
@navbar.find('a.btn-collapse').on 'click', () => @collapse()
@menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
@menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())
@collapse: ->
@adjustWrapperHeight("auto")
@menu.collapse('toggle')
@adjustWrapperHeight: (height) ->
@wrapper.css("height", height)
$ ->
Navigation.initialize()
Вам просто нужно удалить script. Вот мой пример:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/bootstrap.min.js"></script>
<style>
#content {
width: 800px;
height: 2000px;
background: #f5f5f5;
margin: 0 auto;
}
.menu {
background: #ccc;
width: 200px;
height: 400px;
float: left;
}
.affix {
position: fixed;
top: 20px;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div id="content">
<div style="height: 200px"></div>
<div class="affix-top" data-spy="affix" data-offset-top="180">
<div class="menu">AFFIX BAR</div>
</div>
</div>
</body>
</html>
Подобно принятому ответу, вы также можете сделать что-то вроде следующего, чтобы сделать все за один раз:
$('#nav').affix({
offset: { top: $('#nav').offset().top }
}).wrap(function() {
return $('<div></div>', {
height: $(this).outerHeight()
});
});
Это не только вызывает плагин affix
, но также переносит прикрепленный элемент в div, который будет поддерживать исходную высоту навигационной панели.
Мое решение для прикрепления навигатора:
function affixnolag(){
$navbar = $('#navbar');
if($navbar.length < 1)
return false;
h_obj = $navbar.height();
$navbar
.on('affixed', function(){
$navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
})
.on('unaffixed', function(){
if($('#nvfix_tmp').length > 0)
$('#nvfix_tmp').remove();
});
}