divボタンをナビゲーションボタンにリンク

私は5色のパネルを持つウェブページを持っています。そして、ページの右側にナビゲーション弾丸があります。divボタンをナビゲーションボタンにリンク

ページをスクロールすると、各セクションがナビゲーションの箇条書きにリンクされます。 Bulletは、ビューポートにどのスライドが表示されているかに基づいて、activeクラスを持つ必要があります。

ご協力いただければ幸いです。

DEMO

出典

2016-07-14 Anonymous

可能な重複：http://stackoverflow.com/questions/21214810/add-class-to-div-when-in-viewport –

してみてくださいJavaScriptを使用する –

このリファレンスを使用するhttps://jsfiddle.net/cse_tushar/Dxtyu/141/ –

私は私の地元でコードを取られ、JSの下に、その作業罰金その後適用されています。

プロジェクトにScrollit.Jsを追加するだけです。

以下のようにCSSファイルを少し変更するだけです。

CSSファイルの行番号。＃55

.parallax_nav a:active, 
.parallax_nav a:focus, 
.parallax_nav a.js--active { 
    background: #f5f5f1; 
    opacity: 1; 
}

はちょうどそれはあなたが好きなように正常に動作します

.parallax_nav a:active, 
.parallax_nav a:focus, 
.parallax_nav a.active { 
    background: #f5f5f1; 
    opacity: 1; 
}

でそれをreplaxe。セクションごとに<a>タグにアクティブクラスが適用されます。

出典

2016-07-14 09:53:56

私は、クリックしてdivにスクロールするコードを少し変更しました。 onscrollハイライトの場合は、scrollspy.jsを使用するか、ブートストラップナビゲーションを使用します。私は個人的にブートストラップを使用することをお勧めします。

<body class="page-loaded"> 

<div id="page" class="hfeed site full-height"> 
    <div class="page-wrap full-height"> 

     <div class="main full-height" role="main"> 
      <div id="" class="content full-height"> 

       <div class="parallax_boxs"> 
        <div id="black" class="parallax_box"> 
         <div class="parallax_box_inner parallax_box_inner_box1"> 

          <div class="parallax_box_clip"> 
           <div class="parallax_box_phone"> 
            <div class="mobile_responsive"> 
             <div class="mobile_responsive_inner"> 
              <div class="mobile_responsive_bg"> 
               <div class="responsive_bg_wrap" data-reveal-bg="1"> 
                <img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png"> 
               </div> 
              </div> 
              <div class="mobile_reveal"> 
               <div class="mobile_reveal_wrap" data-reveal-wrap="1"> 
                <video loop="" autoplay="" id="video--1" poster="/assets/video/quizup-poster.jpg"> 
                 <source src="video/boostyourearnings.mov" type="video/mp4"> 
                </video> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 

          <div class="wrap"> 
           <div class="parallax_box__content" style="opacity: 1;"> 
            <div class="pbox_left"> 
              fhffdhfd 
            </div> 
           <div class="pbox_right"> 
             <h3>rehr</h3> 
             <p>fshrsh <a target="_blank" class="link--invisible" href="https://fueled.com/android-app-design">Android app</a>.</p> 
            </div> 
           </div> 
          </div> 

         </div> 
        </div> 

        <div id="green" class="parallax_box "> 
         <div class="parallax_box_inner parallax_box_inner_box2"> 

          <div class="parallax_box_clip"> 
           <div class="parallax_box_phone"> 
            <div class="mobile_responsive"> 
             <div class="mobile_responsive_inner"> 
              <div class="mobile_responsive_bg"> 
               <div class="responsive_bg_wrap" data-reveal-bg="2"> 
                <img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png"> 
               </div> 
              </div> 
              <div class="mobile_reveal"> 
               <div class="mobile_reveal_wrap" data-reveal-wrap="2"> 
                <video loop="" autoplay="" id="video--2" poster="/assets/video/sunnycomb-poster.jpg"> 
                 <source src="video/engageyourfanbase.mov" type="video/mp4"> 
                </video> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 

          <div class="wrap"> 
           <div class="parallax_box__content" style="opacity: 1;"> 
            <div class="pbox_left"> 
             xvdshdsh 
            </div> 
       <div class="pbox_right"> 
             <h3>resheh</h3> 
             <p>rehrh</p> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div id="blue" class="parallax_box "> 
         <div class="parallax_box_inner parallax_box_inner_box3"> 

          <div class="parallax_box_clip"> 
           <div class="parallax_box_phone"> 
            <div class="mobile_responsive"> 
             <div class="mobile_responsive_inner"> 
              <div class="mobile_responsive_bg"> 
               <div class="responsive_bg_wrap" data-reveal-bg="3"> 
                <img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png"> 
               </div> 
              </div> 
              <div class="mobile_reveal"> 
               <div class="mobile_reveal_wrap" data-reveal-wrap="3"> 
                <video loop="" autoplay="" id="video--3" poster="/assets/video/afterlight-poster.jpg"> 
                 <source src="video/showcaseyourvideosfirst.mov" type="video/mp4"> 
                </video> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 

          <div class="wrap"> 
           <div class="parallax_box__content" style="opacity: 1;"> 
            <div class="pbox_left"> 
              sgagash 
            </div> 
           <div class="pbox_right"> 
             <h3>Trhr</h3> 
             <p>shsh</p> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 


        <div id="grey" class="parallax_box "> 
         <div class="parallax_box_inner parallax_box_inner_box4"> 

          <div class="parallax_box_clip"> 
           <div class="parallax_box_phone"> 
            <div class="mobile_responsive"> 
             <div class="mobile_responsive_inner"> 
              <div class="mobile_responsive_bg"> 
               <div class="responsive_bg_wrap" data-reveal-bg="4"> 
                <img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png"> 
               </div> 
              </div> 
              <div class="mobile_reveal"> 
               <div class="mobile_reveal_wrap" data-reveal-wrap="4"> 
                <video loop="" autoplay="" id="video--4" poster="/assets/video/keyme-poster.jpg"> 
                 <source src="video/trackwhatyouredoing.mov" type="video/mp4"> 
                </video> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 

          <div class="wrap"> 
           <div class="parallax_box__content" style="opacity: 1;"> 
            <div class="pbox_left"> 
             eaheheh 
            </div> 
           <div class="pbox_right"> 
             <h3>shdh</h3> 
             <p>srehrh</p> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 


        <div id="red" class="parallax_box "> 
         <div class="parallax_box_inner parallax_box_inner_box5"> 

          <div class="parallax_box_clip"> 
           <div class="parallax_box_phone"> 
            <div class="mobile_responsive"> 
             <div class="mobile_responsive_inner"> 
              <div class="mobile_responsive_bg"> 
               <div class="responsive_bg_wrap" data-reveal-bg="5"> 
                <img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png"> 
               </div> 
              </div> 
              <div class="mobile_reveal"> 
               <div class="mobile_reveal_wrap" data-reveal-wrap="5"> 
                <video loop="" autoplay="" id="video--5" poster="/assets/video/athlete-minder-poster.jpg"> 
                 <source src="video/youcalltheshots.mov" type="video/mp4"> 
                </video> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 

          <div class="wrap"> 
           <div class="parallax_box__content" style="opacity: 1;"> 
            <div class="pbox_left"> 
             ehwhewhewh 
            </div> 
           <div class="pbox_right"> 
             <h3>Cdxhrhs</h3> 
             <p>fdh</p> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 





        <div class="parallax_nav"> 
          <a id="black-btn" href="#black" class="js--active">Link</a> 
          <a id="green-btn" href="#green" >Link</a> 
          <a id="blue-btn" href="#blue" >Link</a> 
          <a id="grey-btn" href="#grey" >Link</a> 
          <a id="red-btn" href="#red" >Link</a> 
        </div> 
       </div> 

      </div> 
     </div> 

    </div> 
</div>

Javascriptを

$(document).ready(function(){ 
    $('#green-btn').on('click',function(){ 
    $('#green-btn').addClass("js--active"); 
    $('#black-btn').removeClass("js--active"); 
    $('#blue-btn').removeClass("js--active"); 
    $('#grey-btn').removeClass("js--active"); 
    $('#red-btn').removeClass("js--active"); 
}); 
$('#black-btn').on('click',function(){ 
    $('#green-btn').removeClass("js--active"); 
    $('#black-btn').addClass("js--active"); 
    $('#blue-btn').removeClass("js--active"); 
    $('#grey-btn').removeClass("js--active"); 
    $('#red-btn').removeClass("js--active"); 
}); 
$('#blue-btn').on('click',function(){ 
    $('#green-btn').removeClass("js--active"); 
    $('#black-btn').removeClass("js--active"); 
    $('#blue-btn').addClass("js--active"); 
    $('#grey-btn').removeClass("js--active"); 
    $('#red-btn').removeClass("js--active"); 
}); 
$('#grey-btn').on('click',function(){ 
    $('#green-btn').removeClass("js--active"); 
    $('#black-btn').removeClass("js--active"); 
    $('#blue-btn').removeClass("js--active"); 
    $('#grey-btn').addClass("js--active"); 
    $('#red-btn').removeClass("js--active"); 
}); 
$('#red-btn').on('click',function(){ 
    $('#green-btn').removeClass("js--active"); 
    $('#black-btn').removeClass("js--active"); 
    $('#blue-btn').removeClass("js--active"); 
    $('#grey-btn').removeClass("js--active"); 
    $('#red-btn').addClass("js--active"); 
}); 
});

出典

2016-07-14 10:25:45

divボタンをナビゲーションボタンにリンク

答えて

関連する問題