Tạo bố cục các fixed header và fixed footer Luyện tập sử dụng thuộc tính position để tạo fixed menu. Một thiết kế menu điều hướng độc đáo sẽ góp phần thu hút người dùng sử dụng và ở lại trên thiết kế web của bạn. Fixed menu là một xu hướng được nhiều trang web lựa chọn vì gọn nhẹ, lại dễ dàng sử dụng. Fixed menu, hay còn gọi là floating menu, là menu được gắn cố định ở một vị trí trên trang kể cả khi bạn cuộn trang lên xuống. Kết quả của phần thực hành là một menu như sau: Bước 1. Tạo html cơ bản Tạo html cơ bản Bước 2. Tạo cấu trúc menu : thêm đoạn code sau vào thẻ Bước 3. Bổ sung mã CSS: Bổ sung mã CSS: Trong đó, một số thuộc tính quan trọng của class navbar là:Mục tiêu
Mô tả- Tạo bố cục các fixed header và fixed footer
Hướng dẫn
- Thuộc tính position có giá trị là fixed. Đây là cách để giữ cho menu cố định tại một vị trí
- Thuộc tính top có giá trị là 0. Nó xác định vị trí trên cùng của trình duyệt.
- Thuộc tính width có giá trị là 100%. Nó xác định độ rộng của menu sẽ bằng độ rộng của trình duyệt.
Trên đây CodeGym đã cùng với bạn luyện tập sử dụng thuộc tính position để tạo fixed menu. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!
Như chúng ta đã biết, khi click vào một thẻ a có chứa hash, như dưới đây:
Section 2
Trình duyệt sẽ scroll tới vị trí của element có ID là "section-2" và nó sẽ scroll đến vị trí nhỏ nhất có thể để element đó hiển thị đầy đủ nhất trên màn hình.
Một vài vấn đề đau đầu thường gặp khi sử dụng thẻ a với hash nhằm mục đích tạo hành động scroll:
- Có thể gây nhầm lẫn [đặc biệt là khi link đó nhảy đến một khu vực có chứa các tiêu đề khác].
- Khi mà
0 có... Jump ... Section 1 ...
1... Jump ... Section 1 ... - ...
Việc
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
Dirty HTML Method
Thay vì tập trung vào việc xử lý vấn đề trước tiên như chúng ta thường làm, thì hãy xem cách xử lý vấn đề đó thích hợp cho nhiều trình duyệt trước đã.
Chúng ta sẽ không đặt
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
Tiếp theo chúng ta sẽ styles cho thẻ
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
Cuối cùng, chúng ta sẽ có được một page hoạt động đúng như ý chúng ta muốn.
Clean HTML Method
Sử dụng một thẻ
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
Section 1
...
Chúng ta sẽ xử lý bước tiếp theo bằng CSS bằng cách sử dụng pseudo element thay cho nhiệm vụ của thẻ
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
.section{
&::before{
display: block;
content: "";
margin-top: -80px;
height: 80px;
visibility: hidden;
pointer-events: none;
}
...
}
Và chúng ta đã có một kết quả ưng ý với một cách làm tốt hơn rất nhiều
Scroll-padding-top
Như chúng ta thấy, hai cách trên đã giúp chúng ta xử lý đc vấn đề nêu ra, nhưng nó lại không giải quyết được trong trường hợp
...
Jump
...
Section 1
...
.section span{
margin-top: -80px; /* Size of fixed header */
padding-bottom: 80px;
display: block;
}
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
Section 1
...
Section 1
...
Section 1
...
Section 1
...
Section 1
...
Section 1
...
html, body{
scroll-padding-top: 80px; /* Size of fixed header */
}
Tuy nhiên
Section 1
...
JS/jQuery Method
Chúng ta đều biết Javascript [hay jQuery] rất mạnh trong các tùy biến trên web page, tạo ra những hiệu ứng cũng như các trải nghiệm người dùng vô cùng tuyệt vời. Điều này không cần phải bàn luận thêm gì nữa, hãy cùng xem cách giải quyết thông qua JS hoặc jQuery.
Cụ thể, chúng ta sẽ lấy height của
...
Jump
...
Section 1
...
.section{
&::before{
display: block;
content: "";
margin-top: -80px;
height: 80px;
visibility: hidden;
pointer-events: none;
}
...
}
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
...
Jump
...
Section 1
...
Trước tiên là jQuery Method:
$['a'].click[function[e] {
const headerHeight = $['header'].height[];
const hash = this.hash;
const scrollToSection = $[hash].offset[].top - headerHeight;
$['html, body'].animate[{
scrollTop: scrollToSection,
}, 300];
}];
Đối với Javascript Method:
const navLink = document.querySelectorAll['a'];
const header = document.querySelector['header'];
for[let link of navLink]{
link. title = function[e] {
e.preventDefault[];
const hash = link.hash;
const section = document.querySelector[hash];
const scrollToSection = section.offsetTop - header.offsetHeight;
window.location.hash = hash;
window.scrollTo[0, scrollToSection];
}
}
Và đây là kết quả chúng ta đạt được
Lời kết
Trên đây chúng ta đã tìm hiểu 2 hướng xử lý khi muốn tạo một fixed header có chứa các thẻ link tới các khu vực trong page mà không khiến nội dung của các phần đó bị header che mất.
Nếu bài viết có sai sót ở đâu đó hoặc mọi người có cách xử lý hay hơn thì hãy để lại comment bên dưới. Cảm ơn mọi người đã đọc bài viết.
References
//css-tricks.com/hash-tag-links-padding/
//css-tricks.com/almanac/properties/s/scroll-padding/