スクロールした位置でheaderを変化させる
スクロールした位置でheaderを変化させる:
任意の場所までスクロールすると、header要素のクラスを削除し、新しいクラスを追加する。
（Bootstrap使用）
https://rfs.jp/sb/javascript/js-lab/resize-header-scroll.html
Goal
任意の場所までスクロールすると、header要素のクラスを削除し、新しいクラスを追加する。（Bootstrap使用）
How to
test.html
<head>
<!-- bootstrap strat -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
<!-- bootstrao end -->
</head>
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
test.js
<script>
function init() {
// スクロールして何ピクセルでアニメーションさせるか
var px_change = 1000;
// スクロールのイベントハンドラを登録
window.addEventListener('scroll', function(e){
// 変化するポイントまでスクロールしたらクラスを追加
if ( $(window).scrollTop() > px_change ) {
$(".navbar").addClass("change-white");
// 変化するポイント以前であればクラスを削除
} else if ( $(".navbar").hasClass("change-white") ) {
$(".navbar").removeClass("change-white");
}
});
}
window.onload = init();
</script>
test.css
.change-white {
background-color: white !important;
}
コメント
コメントを投稿