UNIRRY

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

サブメニューが追随してきてフッターんとこで止まるサンプル

sidemenu2

固定メニューの追随アニメーションのサンプル。スクロールにあわせて追随してきて、フッターを飛び越さないでとまるやつ。

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

absoluteのtopの値を変更して追随させます。

#sub {
  position: relative;
  width: 180px;
  float: right;
}
#sub_inner {
  position: absolute;
  top: 0;
  width: 180px;
  height: 650px;
  background: #69aece;
}

js

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

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

      if ( subMenuHt < mainContHt ) {

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

        wind.bind('scrollfix', function (event, scrollTop) {
            fixedMenu();
        });

        var time;
        wind.scroll(function(){
            var top = $('body').scrollTop();
            if (time) {
                clearTimeout(time);
            }
            time = setTimeout(function () {
                time = null;
                wind.trigger('scrollfix', [top]);
            }, 100);
        });

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

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

          if ( windTop >= subMenutop ) {
            if ( windLimit <= footerTop ) {
              subMenuIn.animate({
                'top': windTop - headerHt + 'px'
              }, 500);
            } else {
              subMenuIn.animate({
                'top': bodyHt - (footerHt + subMenuHt) - headerHt - 20 + 'px'
              }, 500);
            }
          } else {
            subMenuIn.animate({
              'top': 0 + 'px'
            }, 500);
          }

        }

      }

    }

サンプル

・追随メニューサンプル


horoscope

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