そのトピックに関するbootstrapのドキュメントは、私を少し混乱させます。接辞navbarを使用したドキュメントのような同様の動作を達成したい:navbarは段落/ページ見出しの下にあり、下にスクロールすると最初にページの上部に到達するまでスクロールし、その後さらにスクロールダウンするために固定する必要があります。
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>
任意の助けに感謝します。
私は同様の問題を抱えていましたが、改善された解決策を見つけたと思います。
HTMLでdata-offset-top
を指定する必要はありません。代わりに、.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%;
}
最後に、固定された要素が固定されると、その要素はページ上のスペースを占有しなくなり、その下の要素が「ジャンプ」します。このさを防ぐために、実行時にnavbarと同じ高さに設定した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
に設定する必要があります。
このクラスの変更が発生したら、クラス.affix
のポジショニングをスタイル設定して、CSSに要素を配置する必要があります。 Bootstrap 2.1は.affix
をposition: fixed;
として既に定義しているため、必要なのは独自の位置の値を追加することだけです。
例:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
この問題を修正するために、オブジェクトが添付または未添付のときにjQueryイベントを発行するようにaffixプラグインを変更しました。
プルリクエストは次のとおりです。 https://github.com/Twitter/bootstrap/pull/4712
コード: https://github.com/corbinu/bootstrap/blob/master/js/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()
を削除する必要があります。
ブートストラップは、ほとんどの場合、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のソリューションに感謝します。私の場合、afflixとcollapseプラグインを一緒に使用すると、navbarの高さと幅に小さな問題がありました。幅の問題は、親要素(私の場合はコンテナー)から継承することで簡単に解決できます。また、私はそれをなんとかJavaScript(実際にはcoffeescript)でスムーズに折りたたむことができました。秘toggleは、折り畳みトグルが発生する前にラッパーの高さを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()
スクリプトを削除するだけです。これが私の例です:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/js/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
プラグインを呼び出すだけでなく、navbarの元の高さを維持するdivで接辞要素をラップします。
Navbarを接続するための私のソリューション:
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();
});
}