スクロールすると一定の位置でメニューを固定する方法
スクロールしてグローバルナビが隠れそうになったときに画面の上部に固定する方法です。
グローバルナビの位置までスクロールしたら、JavaScriptで位置を固定するクラスを追加します
Source
メインイメージ
HTML
CSS
/* ====================================================
グローバルナビゲーションのスタイル
==================================================== */
body {
background: url(backgroundImage.jpg);
padding: 0;
}
.mainImg {
background:url(mainImage.jpg) !important;
background-size:cover;
/** グローバルナビの位置 **/
height: 300px;
}
.fixAlpha {
background: #000000;
}
.fixAlpha li {
float: left;
width:14.28571428571429%;
border-right: 1px solid #ffffff;
}
.fixAlpha li:last-of-type{
border-right: 0;
}
.fixAlpha a {
display: block;
padding: 0.75em 0;
text-decoration: none;
text-align: center;
color: #ffffff;
}
/** グローバルナビを画面の上の部分にくっつける **/
.fixed ul {
border: 1px solid red;
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100%;
background: rgba(0,0,0,0.5);
}
javascript
$(document).ready(function(){
$(function() {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
/** 画面の上部がグローバルナビを越えたらクラスfixedをつける **/
$('.fixAlpha').addClass("fixed");
} else {
/** 画面の上がグローバルナビを越えていなければクラスfixedをつけない **/
$('.fixAlpha').removeClass("fixed");
}
});
});
});
簡単なJavaScriptを使うだけでやれることが増えるんですね。
これを応用するといろいろ面白い動きができそうです。
