スポンサーサイト

2023.04.20 Thursday
0

    一定期間更新がないため広告を表示しています

    category:- | by:スポンサードリンク | - | - | -

    画面をスクロールした時にページ途中にある部分をスクロールさせずに固定して表示する方法

    2014.08.28 Thursday 06:23
    0
      画面をスクロールした時にページ途中にある部分をスクロールさせずに固定して表示する方法

      ★css
      <style type='text/css'>
      .fixed {
      position: fixed;
      width: 100%;
      z-index: 10000;
      }
      #side {
      display:inline-block;
      }
      </style>

      ★javasript
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type="text/javascript">
      $(function($) {
      var tab = $('#side'), offset = tab.offset();
      $(window).scroll(function () {
      if($(window).scrollTop() > offset.top) {
      tab.addClass('fixed');
      } else {
      tab.removeClass('fixed');
      }
      });
      });
      </script>

      ★html
      <div id="side">
      固定して表示する場所
      </div>
      category:javascript | by:ittoocomments(0)trackbacks(0) | -

      ad
      Calender
           12
      3456789
      10111213141516
      17181920212223
      24252627282930
      31      
      << August 2014 >>
      Selected entry
      PR
      Category
      Archives
      Recommend
      Link
      Profile
      Search
      Others
      Mobile
      qrcode
      Powered
      無料ブログ作成サービス JUGEM