Tiêu đề headroom.js với trạng thái tĩnh ban đầu

Question

Tôi đang sử dụng plugin Headroom.js tuyệt vời để tạo tiêu đề tự động ẩn. Tiêu đề là tĩnh từ bắt đầu và trở thành pinned sau khi một bù đắp (khi di chuyển xuống) và sau đó trở lại tĩnh (khi nó trở lại đầu trang).

Dưới đây là những gì tôi đã làm: http://codepen.io/netgloo/pen/KmGpBL

nhưng tôi có 2 vấn đề:

• cuộn xuống từ đầu: khi tiêu đề trở nên gắn, tôi thấy nó trượt xuống và đột nhiên trượt lên
• cuộn lên từ trang giữa: khi tiêu đề đến phần bù trừ biến mất, nhưng tôi cần giữ nó ở đầu trang

Ai đó có thể cho tôi một số trợ giúp hoặc ý tưởng? Cảm ơn

Dưới đây là cách tôi khởi tạo các plugin:

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

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

headroom.init(); 

Answer 1

Kịch bản headroom.js chủ yếu là xử lý việc bổ sung/loại bỏ một số các lớp học dành cho bạn. Đó là vào bạn để thêm các phong cách thích hợp để đạt được hiệu quả mà bạn muốn. Hãy bắt đầu với phần đơn giản nhất, HTML:

HTML

<header> 
    Header 
</header> 

Vậy là xong!

Bây giờ cho các thiết lập 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(); 

Dòng đầu tiên lựa chọn các yếu tố header. Thứ hai tạo đối tượng Headroom mới bằng cách sử dụng các giá trị cấu hình. Tôi đã đặt các giá trị dựa trên hiệu ứng có vẻ như bạn đang cố gắng đạt được - tiêu đề phải trượt đi khi trang được cuộn xuống nhanh và sẽ trượt vào chế độ xem khi trang được cuộn lên.

offset của 205px là khoảng cách từ trên cùng khi tiêu đề có thể được bỏ ghim.

tolerance của 5px là dung sai cuộn trước khi trạng thái thay đổi.

Và cuối cùng chúng ta sẽ xác định các lớp sẽ được thêm vào phần tử cho các trạng thái khác nhau. Khi bắt đầu, phần tử sẽ được gán một lớp là header--fixed. Khi được ghim, phần tử sẽ nhận được lớp slideDown bổ sung. Và khi được bỏ ghim, phần tử sẽ nhận được lớp bổ sung slideUp.

Dòng cuối cùng khởi tạo đối tượng headroom.

Sử dụng các lớp dựa trên trạng thái, giờ đây chúng tôi có thể tạo CSS cần thiết để đạt được hiệu quả bạn muốn.

CSS

Chúng tôi sẽ bắt đầu với lớp .header--fixed:

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

main { 
    padding-top: 110px; 
} 

này đặt vị trí ban đầu của tiêu đề (ở phía trên) và đặt một đệm cho các nội dung chính của để trang không được đề cập trong tiêu đề.

Tiếp theo chúng ta cần phải xác định phong cách cho các quốc gia khác nhau - .top, .not-top, .slideDown và .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; 
} 

Hầu hết các phong cách có liên quan đến việc thiết lập vị trí và chuyển cho mỗi tiểu bang. Tóm lại, lớp .not-top được áp dụng khi trang được cuộn bên dưới tiêu đề. .top được áp dụng khi trang được cuộn gần đầu (trong chiều cao của tiêu đề).

Ngoài CSS quan trọng này, bạn sẽ cần CSS để tạo kiểu đầu trang - màu nền, phông chữ, v.v. Điều này có thể được áp dụng bằng cách nhắm mục tiêu thành phần header hoặc header--fixed lớp.

Phần cuối cùng và điểm mấu chốt của sự cố là đặt lại tiêu đề khi trang được cuộn trở lại đầu trang - nghĩa là window.pageYOffset của 0. Khi trang đạt đến điểm này, chúng tôi cần xóa lớp .slideDown để tiêu đề cuộn với trang.

window.addEventListener('scroll', function() { 
    if (window.pageYOffset === 0) { 
    myElement.classList.remove('slideDown') 
    } 
}) 

Các Full Mã

Đưa nó tất cả cùng nhau chúng ta có được điều này:

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

Và với điều đó chúng tôi có tất cả mọi thứ chúng ta cần. Để có ví dụ làm việc với CSS được thực hiện trong SCSS như ví dụ của bạn, hãy xem this Codepen.