アトリエロワ

スクロールすると上からニョキッと降りてくるメニューjQuery

html

<div class="downmenu">
メニューの内容(この枠が降りてくる)
</div>

jQuery

  var headNav = $("#downmenu");
	$(window).on('load scroll', function () {
    if($(this).scrollTop() > 600 && headNav.hasClass('fixed') == false) {
      headNav.css({"top": '-100px'});
      headNav.addClass('fixed');
      headNav.animate({"top": 0 }, 600);
    }
    else if($(this).scrollTop() < 300 && headNav.hasClass('fixed') == true){
      headNav.removeClass('fixed');
      headNav.animate({"top": '-100px' }, 600);
    }
  });

css

  #downmenu {
    height: 100px;
    position: absolute;
    z-index: 5;
  }
  #downmenu.fixed {
    position: fixed;
    top: 0;
    left: 0;
  }

HOME > javascript > スクロールすると上からニョキッと降りてくるメニューjQuery

javascript

javascript

+ More