Khi sử dụng hashtag # cho attribute href, trình duyệt sẽ scroll tới element có id tương ứng section-two. Đây là một tính năng từ thời trình duyệt mới ra đời.
<a href="#section-two">Section Two</a>Nhưng một khi chúng ta thêm một element với position: fixed, như header, vị trí scroll đến sẽ ko còn đúng nữa, nó vẫn scroll tới element đó, nhưng giờ nó có thể bị che bởi element đang set fixed.
Có rất nhiều cách để giải quyết vấn đề này trước đây, như thêm vào một đoạn padding vào element, hoặc dùng một đoạn javascript để handle, có tất cả 5 cách để giải quyết con issue này.
Giờ đây chúng ta có cách hoàn toàn mới chỉ với css
Sử dụng 2 thuộc tính mới là scroll-padding và scroll-margin
body {
scroll-padding-top: 70px;
/* giá trị chiều cao của header */
}Hiện tại cái này chỉ chạy tốt trên trình duyệt dùng Chromium
HFixed Headers, On-Page Links, and Overlapping Content, Oh My!
Initializing...