UNIRRY

WEBデザインとホロスコープと宇宙のブログ

サブメニューがスクロールしたら上と下にくっつくサンプル

sidemenu1

固定MENUのサンプル。サブメニューが左にスクロールのトップにくっついたらずっとくっついてきて、フッターのとこまできたらその時はフッターにくっついてるってやつ。

html

<div id="header"></div>
<div id="contents">
<div id="main"></div>
<div id="sub"><div id="sub_inner"></div></div>
</div><!-- /contents -->
<div id="footer"></div>

css

上にくっつく時と下にくっつく時であてるcssを変えるので「.fixbtm」「.fixmenu」のふたつ用意した。

#sub {
  position: relative;
  width: 180px;
  float: right;
}
#sub_inner {
  height: 650px;
  background: #ef959f;
}
#sub .fixbtm {
  position: absolute;
  bottom: 0;
  width: 180px;
}
#sub .fixmenu {
  position: fixed;
  top: 0;
  width: 180px;
}

js

    var subMenu = $('#sub');
    var subMenuIn = subMenu.find('#sub_inner');
    var wind = $(window);
    var body = $('body');
    var footer = $('#footer');
    var mainCont = $('#main');

    if ( subMenu.length !== 0 ) {
      
      var subMenutop  = subMenu.offset().top;
      var subMenuHt   = subMenu.outerHeight();
      var bodyHt      = body.outerHeight();
      var footerHt    = footer.outerHeight();
      var mainContHt  = mainCont.outerHeight();

      if ( subMenuHt < mainContHt ) {

        subMenu.css('height', mainContHt + 'px');     

        wind.scroll(function(){
          fixedMenu();
        });

        wind.load(function(){
          fixedMenu();
        });

        function fixedMenu() {
          var windTop    = wind.scrollTop();
          var footerTop  = footer.offset().top;
          var windLimit  = windTop + subMenuHt;

          if ( windTop >= subMenutop ) {
            if ( windLimit <= footerTop ) {
              subMenuIn.removeClass('fixbtm');
              subMenuIn.addClass('fixmenu');
            } else {
              subMenuIn.removeClass('fixmenu');
              subMenuIn.addClass('fixbtm');
            }
          } else {
            subMenuIn.removeClass('fixmenu');
          }
        }


      }

    }

サンプル

・固定メニューのサンプル


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3