Shrink navbar AFTER cover image

Question

私はブートストラップ4を使って最初からウェブサイトを構築しています。そのアイデアは、上部に透明なナビゲーションバーを固定したフルスクリーンのカバーイメージです。この部分は簡単ですし、私は私の目を閉じてかなりそれを行うことができます。私が現在達成しようとしているのは効果です。ユーザーがスクロールしてカバー画像の端に当たったとき、ナビゲーションバーは縮小して上端がスティッキーになります。

私は非常に多くのチュートリアルとガイドで、Jqueryでこれを行う方法を教えていますが、基本的には「非常に多くのピクセル」の後に収縮させるコードを提供しています）。私はJqueryをクラスに追加してクラスを削除するのが好きですが、どのように修正して50pxではなくカバーイメージの底に当たるようにするかはわかりません。

$(window).scroll(function() { 
    if ($(document).scrollTop() > 50) { 
    $('nav').addClass('shrink'); 
    } else { 
    $('nav').removeClass('shrink'); 
    } 
}); 

Answer 1

jqueryのおかげでレンダリングされたイメージの高さを得ることができます。

次に、オフセットパラメータを変更するだけです。ここではペンです： https://codepen.io/anon/pen/KyQddz

<div class="navbar"> 
    This is my navbar 
</div> 
<figure> 
    <img src="https://via.placeholder.com/350x80" /> 
</figure> 



* { 
    margin: 0; 
    padding:0; 
    box-sizing: border-box; 
} 
.navbar { 
    background: red; 
    width: 100%; 
    height: 60px; 
    position: fixed; 
    top:0; 
} 
.shrink { 
    background: green; 
} 
figure { 
    height: 2000px; 
} 
img { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

var imgHeight; 

$(window).on('load', function() { 
    imgHeight = $('img').height(); 
}); 

$(window).scroll(function() { 
    if ($(document).scrollTop() > imgHeight) { 
    $('.navbar').addClass('shrink'); 
    } else { 
    $('.navbar').removeClass('shrink'); 
    } 
}); 

あなたはナビゲーションバーをしたい場合は、画像の高さをスクロールした後にのみ固定され、ちょうど.shrinkクラスにposition:fixed;top:0;を移動します。

.navbar { 
     background: red; 
     width: 100%; 
     height: 60px; 
    } 
    .shrink { 
     background: green; 
     position: fixed; 
     top:0; 
    }