WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

要素が途中からFixedになる

.offset();

要素の表示位置。
複数ある場合は最初にある要素の位置になる。
topとleftのオブジェクトを返す。
左上からの位置

.scrollTop();

合致する全ての要素のスクロール上位置を取得・指定できる。
スクロールバーのスクロール位置

現在のスクロール位置
$(function(){
  $(window).scroll(function(){
    var y =$(this).scrollTop();
  });
});

taneppa.net


fixedになる要素は最初からpositionで配置しておくと良い。

HTML
<nav>
<ul>
  <li>TOP</li>
  <li>ABOUT</li>
  <li>WORKS</li>
  <li>CONTACT</li>
  <li class="nav_position">スクロール量 : <span></span></li>
</ul>
</nav>

<div class="about">

</div>
<div class="works">

</div>
<div class="contact">

</div>
CSS
body, html, div, nav, ul, li, p  {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

ul, li {
  list-style: none;
}

a {
  text-decoration: none;
}

body, html {
  position: relative;
  width: 100%;
  height: 100%;
}

.about {
  width: 100%;
  height: 100%;
  background: PeachPuff;
}

.works {
  width: 100%;
  height: 100%;
  background: LemonChiffon;
}

.contact {
  width: 100%;
  height: 100%;
  background: palegoldenrod;
}

ul {
  position: absolute;
  top: 280px;
  right: 50px;
}
ul {
  li {
    background: brown;
    width: 300px;
    cursor: pointer;
    color: #FFF;
    padding: 10px 0;
    text-align: center;
    border-top: 1px dotted #FFF;
    &:first-child {
      border: none;
    }
  }
}
JS
$(function(){
  var navPos = $("ul").offset();
  
  $(window).scroll(function(){
    var y =$(this).scrollTop();
    $(".nav_position span").text( y );
    if(y > navPos.top - 10) { 
      console.log("ture");
      $("ul").css({"position":"fixed","top":"10px"});
    } else {
      $("ul").css({"position":"absolute","top": navPos.top + "px"});
    }
  });
});