スクロール ラベル一時固定

[su_tabs][su_tab title=”HTML”]

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body>
    <div class="main">
      <div class="content">
      </div>

      <div id="title1", class="title">
        <h3>Title1</h3>
      </div>

      <div class="content">
      </div>

      <div id="title2", class="title", style="background-color:green">
        <h3>Title2</h3>
      </div>

      <div class="content">
      </div>

      <div id="title3", class="title">
        <h3>Title3</h3>
      </div>

      <div class="content">
      </div>

    </div>
  </body>
</html>

[/su_tab]

[su_tab title=”CSS”]

html, body{
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}

body h3 {
  margin: 0;
  padding: 0;
}

.main{
  position: relative;
  min-height: 5000px;
}

.title{
  margin: 0;
  width: 100%;
  height: 50px;
  background-color: yellow;
  text-align: center;
  position: absolute;
}

.title h3{
  line-height: 50px;
  font-size: 15px;
  margin: 0;
  padding: 0;
}

.content{
  width: 100%;
  height: 2000px;
  background-color:grey;
}

.fixed{
  position: fixed;
  top: 0px;
}

.moved{
  position: absolute;
}

[/su_tab]

[su_tab title=”JS”]

$(function(){
    var title1    = $("#title1");
    var title2    = $("#title2");
    var title3    = $("#title3");

    var title1Top = title1.offset().top;
    var title2Top = title2.offset().top;
    var title3Top = title3.offset().top;

    var tHeight = 50;

    $(window).scroll(function () {

        scrollTop = $(window).scrollTop();

        // 停止
        if(scrollTop >= title3Top) {
            title1.removeClass("fixed");
            title2.removeClass("fixed");
            title3.addClass("fixed");

        }else if(scrollTop >= title2Top){
            title1.removeClass("fixed");
            title2.addClass("fixed");
            title3.removeClass("fixed");

        }else if(scrollTop >= title1Top){
            title1.addClass("fixed");
            title2.removeClass("fixed");
            title3.removeClass("fixed");

        }else{
            title1.removeClass("fixed");
            title2.removeClass("fixed");
            title3.removeClass("fixed");
        }

        // 再始動
        if(scrollTop >= title3Top-tHeight){
            title1.removeClass("moved");
            title2.addClass("moved");
            title3.removeClass("moved");

            title1.css('top',"");
            title2.css('top',title3Top-tHeight);
            title3.css('top',"");

        }else if(scrollTop >= title2Top-tHeight){
            title1.addClass("moved");
            title2.removeClass("moved");
            title3.removeClass("moved");

            title1.css('top',title2Top-tHeight);
            title2.css('top',"");
            title3.css('top',"");

        }else{
            title1.removeClass("moved");
            title2.removeClass("moved");
            title3.removeClass("moved");

            title1.css('top',"");
            title2.css('top',"");
            title3.css('top',"");
        }
    });
});

[/su_tab][/su_tabs]