ある程度スクロールしたらブラウザ上部に固定するメニュー


Notice: Undefined index: plus_sharedcount_enabled in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/simple-share-buttons-adder/php/class-buttons.php on line 670

Notice: Undefined index: bar_sharedcount_enabled in /usr/home/aa106acgzb/html/notebook/wp-content/plugins/simple-share-buttons-adder/php/class-buttons.php on line 672

ページを開いた時にはヘッダーの下部にナビゲーションメニューがあって、スクロールした時にそのまま上がって表示されなくならずに、ページ上部に固定される様にしたい!って時の方法。

今回はjQueryとCSSで再現してみます。

まずはjQueryで動作を制御します。

$(window).scroll(function(){
$(window).scroll(function(){ var st = $(window).scrollTop();
if(st>100){ $('header nav').addClass("scrolloff") 
} else {
$('header nav').removeClass("scrolloff") }
});

このコードではスクロールした値を変数「st」に格納したうえで、if分を使い「st」の値が100以上であればnavタグにclass名scrolloffを追加し100以上でなければ、class名scrolloffを削除しています。
このコードでは出来るだけjQueryは簡単にして、CSSを上手に使うようにしています。

ここまでが上手くできていれば、ブラウザで100px以上スクロールすればnavタグにクラス名が付くので、クロームで検証してみましょう。

そしてCSSで動きに対してレイアウトを変えていきます。

header nav {
position: absolute;
left: 0;
bottom: 0;
}
header nav.scrolloff {
position: fixed;
top: 0px;
bottom: initial;
z-index: 10;
}

このCSSでは今回の動作用の最小限で記述しています。
後は良いようにしてね!

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です