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元件。第二個使用配置值創建一個新的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類，以便頁面隨頁面一起滾動。

​​3210

的完整代碼

把所有我們一起得到：

// 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>

有了這樣的，我們有我們需要的一切。有關SCSS中完成的CSS的示例，請參閱this Codepen。