Bootstrap scroll spyの使い方は？

私はスクロールスパイを垂直ナビで正しく動作させることができません。下に私が使用しているコードがあります。何らかの理由で、「2」だけがアクティブになります。Bootstrap scroll spyの使い方は？

誰かが間違っていることを考えていますか？

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Twitter Bootstrap Scroll Spy Playground</title> 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row"> 
     <div class="span3"> 
      <ul class="navbar nav nav-list affix"> 
       <li class="active"><a href="#one">One</a></li> 
       <li><a href="#two">Two</a></li> 
      </ul> 
     </div> 
     <div class="span1" data-spy="scroll"> 
      <section id="one"> 
      <h1>One</h1> 
      <h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2> 
      </section> 
      <section id="two"> 
      <h1>Two</h1> 
      <h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2> 
      </section> 
     </div> 
     </div> 
    </div> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="bootstrap/js/bootstrap.js"></script> 
</body> 
</html>

出典

2012-10-30 user1780429

あなたは自分のためにこれを整理でhttp://jsfiddle.net/mCxqY/

<body data-spy="scroll" data-target="#navbar"> 
    <div id="post1" class="box"> 
     <h1>Post 1</h1> 
     <p> Scroll Down↓</p> 
    </div> 
    <div id="post2" class="box"><h1>Post 2</h1></div> 
    <div id="post3" class="box"><h1>Post 3</h1></div> 

    <div id="navbar"> 
     <ul class="nav"> 
      <li><a href="#post1">Post 1</a></li> 
      <li><a href="#post2">Post 2</a></li> 
      <li><a href="#post3">Post 3</a></li> 
     </ul> 
    </div> 

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script> 
</body>

CSS

@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css); 
.box{ 
    margin: 20px; padding: 15px; 
    background: #eee; 
    height: 500px; 
} 
#navbar{ 
    position: fixed; 
    bottom: 0; left: 20px; 
    width: 100%; 
    background: #fff; 
} 
.nav li a{ 
    float: left; 
    width: 80px; 
    padding: 15px 0; 
} 
.nav li a:hover{ 
    color: #f33 !important; 
    background: none; 
} 
.nav li.active a{ 
    color: #f55; 
    text-decoration: underline; 
}

出典

2012-10-30 06:52:29

感謝を使用しています。しかし、私はまだ元のコードに何が間違っているのか分かりません。 – user1780429

実際には、あなたのサンプルをスタンドアロンのファイルに解凍しようとしましたが、それは私のためには機能しません。こちらをご覧ください：https://dl.dropbox.com/u/18323746/Tmp/html-playground/try-stakoverflow-answer-original.html – user1780429

フィディードは動作していませんか？私は複数のブラウザを試しました... –

のようにこれを行うことができ、私は要素が時に見張られされていることを発見しましたにはスクロールバーが必要です。

このフィドルを見てみましょう：http://jsfiddle.net/adamp/qgU6h/1/

をあなたはどちらかのbody要素（$('body').scrollspy()）に直接スパイしたり、コンテンツの明示的な高さを与え、スクロールバーを表示するためにそれを強制することができます。

（ブートストラップdocumentation exampleを見れば、それは一定の高さのトリックを行います。）

出典

2013-03-28 15:14:50

* *ドキュメンテーションの例**リンクが死んでいる、あなたは[ここ]（http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy）を今見つけることができます。 –

投稿内のscrollspyのドキュメントURLを編集しました。 –

+1「スパイの要素にはスクロールバーが必要です」というのは、それが私にとってのトリックです！ – David

不満や研究の時間後、私はwww.mtjhax.wordpress.com（多くの人々はまた、ブートストラップ接辞のマニュアルに満足していないことを見つけるようになりました）。しかし周りを探し、すべての後、キャロル・スケリーことで、このソリューションは、私の仕事：

<body data-spy="scroll" data-target="#navbar"> 
    ... 
</body>

そして、ナビゲーションバー自体べき：http://bootply.com/63937

は、体が次のようになり、あなたのナビゲーションは、idが「ナビゲーションバー」だったと言います次のようになる：あなたは、プラグインを初期化

<div class="navbar" id="navbar"> 
    <ul class="nav navbar-nav"> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul>    
</div>

...

$('#nav').affix({ 
    offset: {top: 0} 
});

...とナビゲーションに適切なスタイリング与える：

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
}

出典

2013-08-12 20:16:40

質問はscrollspyの機能についてのものであり、添付ファイルのものではありません。 – chikamichi

を私は私のために動作するようにscrollspy取得するには二つのことをしなければなりませんでした。

まず、私は<body>要素に高さを与えなければならなかった：

<style> 

    .body 
    { 
    height: 100%; 
    } 

</style>  

<body data-spy="scroll" data-target="#scrollElement" data-offset="0">

私はスクロールスパイはあなたがスパイしている要素の高さを取得しようとしているためであるを考える、要素の高さが指定されていない場合は、null（または0？）の値が渡されます。これはスクリプトの計算を壊しているようです。

第2に、私のid要素の間に（navアンカーが向いている）十分な垂直スペースがあることを確認しなければなりませんでした。

必要なスペースの正確な量を把握できませんでした（これはデータオフセット属性によって異なるため、おそらくそれと関係しています）が、高さがあなたのスパイ要素とscrollspyはまだ動作していません - あなたのid要素の間にさらにコンテンツを追加してください。

出典

2014-07-18 01:15:21 Jerreck

おかげJerreckは、私は私が私のCSSの体セレクタで

height: 100%;

の助けを借りて作品作ることができた

ブートストラップhttp://getbootstrap.com/javascript/#scrollspyでみんなで推奨されているようにも

体内にposition: relative;も追加しました。

私のCSSでのボディセレクタの始まりはこのように書きます：

body { 
    position: relative; 
    height: 100%; 
    /* … */ 
}

を<body>でHTMLに私はそれがこの

<body data-spy="scroll" data-target="#navigation">

ようになりました

data-offset="0"

を削除する必要がありました

出典

2014-08-18 00:34:02

$(window).scroll(function() { 
    if ($(".navbar").offset().top > 50) { 
     $(".navbar-fixed-top").addClass("top-nav-collapse"); 
    } else { 
     $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
    } 
}); 

//jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
});

出典

2016-06-23 12:14:27

私はこれを好きでした。データターゲットのために私はクラス名に返信用.navbar

 <body data-spy="scroll" data-target=".navbar" data-offset="50"> 
     <nav class="navbar navbar-default navbar-fixed-top" >

出典

2017-06-25 23:43:03

Bootstrap scroll spyの使い方は？

答えて

関連する問題