スクロールすると上からニョキッと降りてくるメニュー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
- slick sliderのサムネイルを縦に流す
- formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
- マウスオーバー・マウスアウト(スマホの時はクリック)で画像を切り替えるjquery。
- querySelectorAllエレメントのhrefをforEachで削除する
- jQuery,Masonry,imagesloadedで画像を敷き詰める
- jQueryで特定のページからリンクされた後のページでclassを追加
- カレンダー
- 特定の要素を持っていたら(あったら)jQuery
- マウス・マウスホイールで横スクロールするjavascript
- 横スクロール要素をマウスホイールで動かせるjavascript
- jqueryとcssでタブ
- 特定の要素を持つ時にclassを付けるjQuery
- スクロールして現れたらアニメーション(フェード等)開始jquery
- MOREボタンで数件ずつ要素を表示wp
- slick 基本
- スクロールして表示するとフェードイン
- スクロールして表示されたタイミングでアクションを起こすjs
- スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる(消える)
- Enterキーを押すとinputが空欄になるのを防ぐ
- jsでふわふわ縦に揺れる
- 特定の要素の幅と高さを取得するjavascript
- ウィンドウ幅リサイズごとにブラウザをリロードするjavascript
- サイトにローディングを実装するjavascript