2017-12-06 19 views
0

スティッキーナビの内容をスクロールしている間に固定される、ページの中央にスティッキーナビがあります(アジェンダの日)。 NAVは、ブートストラップタブで、これはHTMLがどのように見えるかです:スティッキーナビとスクロールトップへの混乱

<ul class="nav nav-tabs followMeBar agenda-days text-center"> 
    <li class="active"><a class="day" href="#1" data-toggle="tab">Day 1</a></li> 
    <li><a class="day" href="#2" data-toggle="tab">Day 2</a></li> 
    <li><a class="day" href="#3" data-toggle="tab">Day 3</a></li> 
</ul> 

と、次のようにタブの内容は、対応するIDを持つdiv要素に配置されています。

<div class="tab-pane" id="1"> 
    <h3>Day 1</h3> 

すべては一つのことを除いて正常に動作しています1日目の半分をスクロールして2日目をクリックすると、コンテンツは2日目に切り替わりますが、それでも半分はスクロールダウンしています。 1日目、2日目、3日目はどのようにしてコンテンツを切り替え、(ページの上部ではなく)アジェンダコンテンツの上部にスクロールさせるのですか?日リンクの李コンテナにクラスを追加し、すべてのhttps://codepen.io/anon/pen/POvGPr

答えて

1

まず:

は、ここに私の完全なコード例を示します。たとえば、日のナビゲーションの前にセレクタを追加します。

<div class="test"></div> 

<li class="active scroll-top"><a href="#1" data-toggle="tab">Day 1</a></li> 

    $('.scroll-top').click(function(){ 
    $('html,body').animate({ 
     scrollTop: $(".test").offset().top}, 
     'slow'); 
    }); 
+1

Awsome!それは理にかなっています。私はペンを更新し、魅力のように動作します。ありがとうStefano :) – Marz