0

このサイトhttp://www.solewood.com/のようなヘッダーが必要なクライアントがいます。 ここでいくつかの質問を見つけましたが、それらはヘッダーの特定の要素のみを対象としています。これが私が取り組んでいるサイトですhttp://treestyle.com/パスワードは vewghu 両方とも Shopify サイトです。どんな助けでも大歓迎です。

4

2 に答える 2

0

ソールウッドの Web サイトを調べると、ヘッダーがどのように実装されているかがわかります。

ページが上部にある場合、ヘッダー div には次の CSS があります。

<div class="header">

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

下にスクロールすると、.header_barCSS クラスも div に追加されます。

<div class="header header_bar">

.header_bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
}

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

ユーザーが上から下にスクロールすると、他にも変更されることがいくつかあります (ロゴ、テキストの色など)。

ユーザーがページの上部にいるかどうかを検出する方法がわからない場合は、こちらを参照してください。

編集：

あなたのコメントに応えて、jQuery の.toggleClass()を 2 つのパラメーターで使用してみてください。

例えば：

$(window).scroll(function(e){
    $el = $('.header');
    $el.toggleClass('header_bar', $(this).scrollTop() > 0); 
});
于 2013-11-26T23:05:43.857 に答える
0

これはそれを非常にうまく示しています: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_shrink_header_scroll

この手法を使用して、スクロール時に背景色を白に変更し、上部に戻ると透明に戻しました。

そして、ヘッダーを完全に交換したい場合。ヘッダーを複製し、これを使用してそれらの表示のオンとオフを切り替えることができます。

于 2021-06-18T01:48:08.743 に答える