menu

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

H&Rブログ > JavaScript > スライド > サイドバーを追従させよう!

サイドバーを追従させよう!

JavaScript




どうもRyokutyaです。
今回はサイトをスクロールした際にサイドバーがついてきくる方法について説明していきます。

今回やること

今回は、完成品のコード紹介と使い方、サンプルの構造、について説明していきます。

コードの紹介

完成品のコードです。コピペして使ってください。
※全て記載するとすごく長くなってしまいますので、実際使う際いらない部分は割愛しています。(boxの中身やデザイン部分のcssなど)

html

 <header>
      <div class="header_title">
        <h1>サイト名</h1>
      </div>
    </header>
    <div class="all_cover">
      <!-- left_side start -->
      <div class="left_side">

        <div class="left_box left_box1 profile">
            
        </div>

        <div class="left_box left_box2 category">
          
        </div>

        <div class="left_box left_box3 advertising left_target">
         
        </div>

      </div>
      <!-- left_side end -->

      <!-- main start -->
      <div class="main"> 

        <div& class="main_content">

        </div>

      </div>
      <!-- main end -->

      <!-- right_side start -->
      <!-- ここより下は右サイドバーです。付与するクラス名をright_targetにしてください -->
      <div class="right_side">

        <div class="right_box right_box1 archive">
          
        </div>

        <div class="right_box right_box2 date right_target">
          
        </div>

        <div class="right_box right_box3 advertising2">

        </div>    
      </div>

      <!-- right_side end-->

    </div><!-- all_cover end-->
    <footer>
      <p>logo</p>
      <p>お知らせ</p>
      <p>サイトマップ</p>
    </footer>

css

//=================================================//
//javascript用
//=================================================//
.content_follow{
    position: fixed;
    top:0;
}

.end_follow{
    position: absolute;
    bottom: 0px;
    
}

JavaScript(JavaScript+jQuery)

    //**** 左サイドバー準備 ****//
    //left_targetが1つもないと.topの部分でエラーがでるためif文にいれている
    if( $('.left_side').find('.left_target').length ){
        var leftNextBrother=$('.left_target').nextAll('div');
        var leftNextBrotherLength=leftNextBrother.length;
        for(i=0; i<leftNextBrotherLength; i++){
            leftNextBrother[i].classList.add('left_target');
        }
        $('.left_target').wrapAll('<div class="left_follow">');
        var leftTargetPosition=$('.left_follow').offset().top;
        var leftTargetWidth=$('.left_follow').innerWidth();
        var leftFollow=$('.left_follow');
        //left_followの高さ
        var leftFollowHeight=$('.left_follow').height();
    }
    
    //**** 右サイドバー準備 ****//
    //right_targetが1つもないと.topの部分でエラーがでるためif文にいれている
    if( $('.right_side').find('.right_target').length ){
        var rightNextBrother=$('.right_target').nextAll('div');
        var rightNextBrotherLength=rightNextBrother.length;
        for(i=0; i<rightNextBrotherLength; i++){
            rightNextBrother[i].classList.add('right_target');
        }
        $('.right_target').wrapAll('<div class="right_follow">');
        var rightTargetPosition=$('.right_follow').offset().top;
        var rightTargetWidth=$('.right_follow').innerWidth();
        var rightFollow=$('.right_follow');
        //right_followの高さ
        var rightFollowHeight=$('.right_follow').height();
    }

    
    //footerの高さを取得
    var footerPosition=$('footer').offset().top;

    window.onscroll=function(){
        //現在のスクロール量を取得
        var scrollAmount=window.pageYOffset;
        
        function sideFollow(sideTargetPosition,sideTargetWidth,sideFollowHeight,sideFollow){
            
            //条件1
            if(sideTargetPosition > scrollAmount){
                sideFollow.removeClass('content_follow');
                sideFollow.removeClass('end_follow');
            }

            //条件2
            if(sideTargetPosition < scrollAmount && footerPosition>sideFollowHeight+scrollAmount){
                sideFollow.addClass('content_follow');
                sideFollow.removeClass('end_follow');
                $('.content_follow').css('width',sideTargetWidth+'px');
            }

             //条件3
            if(footerPosition < sideFollowHeight+scrollAmount){
                sideFollow.addClass('end_follow');
                sideFollow.removeClass('content_follow');
            }

        }

        //======= 右サイドの分岐 =======//
        sideFollow(rightTargetPosition,rightTargetWidth,rightFollowHeight,rightFollow);

        //======= 左サイドの分岐 =======//
        sideFollow(leftTargetPosition,leftTargetWidth,leftFollowHeight,leftFollow);
}

サンプルの構造

説明に使用するサンプルの構造です。
サイドバーは左側(left_side)と右側(right_side)があります。
サイドバーにはそれぞれboxがありこのboxが1つのコンテンツです。
コピペして使う際の参考にしてください。

サイドバーは左側だけ、右側だけでも問題なく使用できます。
コンテンツ(box)の数はどの数でも対応可能です。

使い方

左側のサイドバーの追従位置の決め方
left_boxが割り振られているdivにleft_targetというクラス名を付与してください。
left_targetを付与したleft_boxより後に記述した兄弟要素のleft_boxの内容が追従します。
left_boxのクラス名は何でも構いません。(構造さえ同じであれば好きな名前にして問題ありません。ただしleft_targetは必ずこの名前にしてください)

右側のサイドバーの追従位置の決め方
左側と基本的に同じルールですが、付与するクラス名をright_targetにしてください。

一番上にleft_targetを付与した場合の追従部分
二番上にleft_targetを付与した場合の追従部分
三番上にleft_targetを付与した場合の追従部分

左サイドバーと右サイドバーで付与するクラス名が異なるので注意してください。

おわりに

今回はコード紹介と使い方を説明しました。
次回はコードの内容について説明していきます。
良ければ次回の記事も読んでいただければ嬉しいです。
では、今回はこのあたりで(^^)/




コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ