初期静的状態のHeadroom.jsヘッダー

Question

私は素晴らしいヘッダーを構築するために素晴らしいHeadroom.jsプラグインを使用しています。ヘッダーは開始から静的であり、オフセットの後（スクロールダウンするとき）に固定され、静的に戻るとき（先頭に戻るとき）固定されます。 http://codepen.io/netgloo/pen/KmGpBL

が、私は2つの問題だ：ここで

は私がやっていることである上から下にスクロール

• を：ヘッダが固定になったとき、私はそれが滑落し、突然
をスライドご覧ください
• 中間ページからスクロールアップ：ヘッダーがオフセットに到達すると消えますが、上部に固定しておく必要があります。

誰かが私にいくつかの助けやアイデアを与えることができますか？ここで おかげ

が、私はプラグインを初期化する方法である：

var myElement = document.querySelector("header"); 

var headroom = new Headroom(myElement, { 
    "offset": 150, 
    "tolerance": 0, 
}); 

headroom.init(); 

Answer 1

headroom.jsスクリプトは、主にあなたのためのいくつかのクラスの追加/削除を処理します。あなたが望む効果を達成するために、適切なスタイルを追加するのはあなた次第です。最も簡単な部分、HTMLで始まるのをしてみましょう：それだ

HTML

<header> 
    Header 
</header> 

！ JSのセットアップのために今すぐ

：

JS

var myElement = document.querySelector("header"); 

var headroom = new Headroom(myElement, { 
    "offset": 220, 
    "tolerance": { 
    up: 0, 
    down: 0 
    }, 
    "classes": { 
    "initial": "header--fixed", 
    "pinned": "slideDown", 
    "unpinned": "slideUp", 
    "top": "top", 
    "notTop" : "not-top", 
    } 
}); 

headroom.init(); 

最初の行はheader要素を選択します。 2番目は、コンフィグレーション値を使用して新しいHeadroomオブジェクトを作成します。私は、あなたが達成しようとしているように聞こえるエフェクトに基づいて値を設定しました。ページがスクロールダウンしたときに見出しが滑り落ち、ページがスクロールアップされたときに見えなくなるはずです。

205pxのoffsetは、ヘッダーが固定解除されたときの上からの距離です。

5pxのtoleranceは、状態が変更される前のスクロール許容値です。

最後に、さまざまな状態の要素に追加されるクラスを定義します。開始時に、要素にはheader--fixedのクラスが割り当てられます。ピンに固定されると、要素は追加のslideDownクラスを受信します。そして固定解除されると、その要素は追加のslideUpクラスを受け取ります。

最後の行はheadroomオブジェクトを初期化します。

状態ベースのクラスを使用して、必要な効果を得るために必要なCSSを作成できるようになりました。

CSS

我々は.header--fixedクラスから始めましょう：

.header--fixed { 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

main { 
    padding-top: 110px; 
} 

これは、（上部）ヘッダの初期配置を設定し、メインのコンテンツのパディングを設定しますページのヘッダーには含まれていません。

次は、さまざまな状態のためのスタイルを定義する必要があります - .top、.not-top、.slideDownと.slideUp：

.header--fixed.top { 
    transition: none; 
    transform: translateY(0); 
} 
.header--fixed.not-top { 
    position: fixed; 
    transform: translateY(-100%); 
} 
.header--fixed.slideDown.not-top { 
    transition: transform 0.3s ease-in-out; 
    transform: translateY(0); 
} 
.header--fixed.slideDown.top { 
    transition: transform 0.3s ease-in-out; 
    position: fixed; 
} 
.header--fixed.slideUp.not-top { 
    transition: transform 0.3s ease-in-out; 
    transform: translateY(-100%); 
} 
.header--fixed.slideUp.top { 
    transform: translateY(-100%); 
    position: absolute; 
} 

これらのスタイルのほとんどは、各状態のための位置と遷移を設定に関連しています。つまり、ページがヘッダーの下にスクロールされると、.not-topクラスが適用されます。 .topは、ページが上部（ヘッダーの高さ内）付近でスクロールされているときに適用されます。

重要なCSSに加えて、背景色、フォントなどのヘッダーのスタイル設定にCSSが必要です。これは、header要素またはheader--fixedクラスを対象にすることで適用できます。

最終的な問題は、ページがスクロールバックされたときにヘッダーをリセットすることです。つまり、window.pageYOffsetが0です。ページがこの点に達すると、.slideDownクラスを削除して、ヘッダーがページと共にスクロールするようにする必要があります。

// Headroom.js 
 
// https://github.com/WickyNilliams/headroom.js 
 
var myElement = document.querySelector("header"); 
 

 
var headroom = new Headroom(myElement, { 
 
    "offset": 220, 
 
    "tolerance": { 
 
    up: 0, 
 
    down: 0 
 
    }, 
 
    "classes": { 
 
    "initial": "header--fixed", 
 
    "pinned": "slideDown", 
 
    "unpinned": "slideUp", 
 
    "top": "top", 
 
    "notTop" : "not-top", 
 
    } 
 
}); 
 

 
headroom.init(); 
 

 
// When the page is at the top, remove the slideDown class. 
 
window.addEventListener('scroll', function() { 
 
    if (window.pageYOffset === 0) { 
 
    myElement.classList.remove('slideDown') 
 
    } 
 
})

.header--fixed { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.header--fixed.top { 
 
    transition: none; 
 
    transform: translateY(0); 
 
} 
 
.header--fixed.not-top { 
 
    position: fixed; 
 
    transform: translateY(-100%); 
 
} 
 
.header--fixed.slideDown.not-top { 
 
    transition: transform 0.3s ease-in-out; 
 
    transform: translateY(0); 
 
} 
 
.header--fixed.slideDown.top { 
 
    transition: transform 0.3s ease-in-out; 
 
    position: fixed; 
 
} 
 
.header--fixed.slideUp.not-top { 
 
    transition: transform 0.3s ease-in-out; 
 
    transform: translateY(-100%); 
 
} 
 
.header--fixed.slideUp.top { 
 
    transform: translateY(-100%); 
 
    position: absolute; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 

 
header { 
 
    background: #4ECDC4; 
 
    padding: 40px; 
 
    font: normal 30px/1 sans-serif; 
 
} 
 

 
main { 
 
    padding: 110px 0 0 0; 
 
}

<script src="https://unpkg.com/headroom.js"></script> 
 
<header> 
 
    Header 
 
</header> 
 

 
<main> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
    <p>Lorem ipsum 1</p> 
 
    <p>Lorem ipsum 2</p> 
 
    <p>Lorem ipsum 3</p> 
 
    <p>Lorem ipsum 4</p> 
 
    <p>Lorem ipsum 5</p> 
 
    <p>Lorem ipsum 6</p> 
 
    <p>Lorem ipsum 7</p> 
 
    <p>Lorem ipsum 8</p> 
 
    <p>Lorem ipsum 9</p> 
 
    <p>Lorem ipsum 10</p> 
 
    <hr> 
 
</main>

そして、我々は我々が必要なすべてを持っていると：私たちはこれを取得

​​3210

完全なコード

はすべて一緒にそれを置きます。あなたの例のようなSCSSで行われたCSSの実際の例については、this Codepenを参照してください。