私はブートストラップを使用しており、ブートストラップ付きの scrollspy を含むページがあります。リンクが予期せず起動するため、scrollspy を他のページに追加できません。単純にjQuery関数を使用して追加することは可能ですか:
data-spy="scroll"
そしてdata-target=".subnav"
、その特定のページの読み込み時にページの本文に。
a に scroll spy を追加してもdiv="span12"
機能しないように見えますが、 body に配置すると機能は実際に機能します。
他の誰かがこの方法または別の方法を使用する簡単な解決策を持っている場合は、お知らせください。
現在、私のコードは次のとおりです。
<body> <!-- Add it here to make it work -->
<div class="span12" style="background: #fff;"> <!-- OR add it here and see if it works, if so then I can avoid the function all together. -->
<div class="span11">
<header>
<h1>TITLE</h1>
<h3>The full history of..<small>By Jane Doe</small></h3>
<div class="subnav">
<ul class="nav nav-pills">
<li class="active"><a href="#overview">Introduction</a></li>
...
</ul>
</div>
</header>
<section id="overview"></section>
<section id....
</div>
</div>
そして、topnav を修正するために使用しているスクリプト:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
と$('#navbar').scrollspy();