Kỹ thuật xử lý vấn đề về Anchor Tag và Fixed Header

Nhìn vào hình trên thì ta có thể thấy rằng khi ta click vào một link, link này sẽ điều hướng đến vị trí của một đối tượng ta chỉ định 🤷‍♂️

Vấn đề mà ta gặp phải đó chính là nếu như cho thanh bar có thuộc tính là: position: fixed; khi click vào link, nó sẽ điều hướng đến đối tượng đó và vị trí của đối tượng sẽ ở trên cùng dẫn đến thanh bar và đối tượng này sẽ đè lên nhau.

👉 Để giải quyết tình trạng trên thì mình có tìm hiểu được 2 cách và sẽ chia sẻ cho các bạn ngay bây giờ.

Chuẩn bị

Ta sẽ tạo ra một thanh menu và các content để dễ hình dung nhé.

✍ HTML:

<h1>Anchor and Fixed Headers</h1>
<nav class="nav">
  <ul class="list-nav">
    <li><a href="#a">content A</a></li>
    <li><a href="#b">content B</a></li>
    <li><a href="#c">content C</a></li>
  </ul>
</nav>
<main>
  <section class="content a"><h1 id="a">Content A</h1></section>
  <section class="content b"><h1 id="b">Content B</h1></section>
  <section class="content c"><h1 id="c">Content C</h1></section>
</main>

✍ CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    height: 500px;
    margin: 0 auto;
    max-width: 50em;
    width: 100%;
    color: #fff;
    background-color: #333;
    text-align: center;padding: 25px;font-family: Helvetica;
}
.nav {
    background-color: rgba(173, 216, 230, 0.637);
    position: fixed;
    top: 0;
    height: 60px;
    width: 100%;
    left: 0;
    display: flex;
    align-items: center;
}
.list-nav {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.list-nav li {
    margin: 0 10px;
    list-style: none;
    font-size: 20px;
}
a {color: black;}
.content {height: 600px;}
.a {background-color: #0074d9;}
.b {background-color: #2ecc40;}
.c {background-color: #ff851b;}
.d {background-color: #b10dc9;}
h2 {
    font-size: 2em;
    font-weight: 800;
    margin-top: 40px;
}

✍ Kết quả:

Xử lí vấn đề dùng scroll-margin-top

Cách này rất đơn giản chúng ta chỉ cần thêm scroll-margin-top vào thẻ cần sử dụng. ở đây mình thêm vào thẻ h1

h1 {
  scroll-margin-top: 70px; // height bar : 60px
}

Lưu ý: ở đây chiều cao của thanh bar là 60px nên mình cho vị trí đối tượng sau khi được link đến sẽ cách lề trên cùng >= 60px khoảng 70px theo mình là ổn.

Kết quả sẽ như này 😁

Cách này khá nhanh hỗ trợ hầu hết các trình duyệt tuy nhiên không hỗ trợ trình duyệt IE. Các bạn có thể tham khảo tại đây

Xử lí vấn đề dùng margin và padding

Tiếp theo ta sẽ tới một cách khá hay mà mình tìm hiểu được, cùng theo dõi nhé.

👉 Mình sẽ cho giá trị padding-top: 70px vào đối tượng được link tới ở đây là thẻ h1.

Giải thích 1 chút nhé khi click vào link thì đối tượng được link tới sẽ theo padding-top và dịch xuống cách lề trên cùng 70px tuy nhiên điều đó là chưa đủ vì trước khi được link tới thì khoảng cách giữa phần tử bên trên và đối tượng sẽ trở thành 70px. Điều đó không đúng với khoảng ban đầu giữa các phần tử.

Để xử lí thì ta chỉ việc cho margin-top: -70px để đối tượng trở lại khoảng cách ban đầu khi ta chưa link tới.

Như vậy là đã xong với hầu hết trường hợp. Còn một trường hợp là khi thẻ mà bạn muốn sử dụng là thẻ block như thẻ h1 ở trên thì khi sử dụng padding-top và margin-top ta sẽ bị Margin collapsing. Để xử lí ta sẽ cho thẻ này thuộc tính display: inline-block.

  h1 {
    /* scroll-margin-top: 70px; */
    padding-top: 70px;
    margin-top: -70px;
    display: inline-block;
  }

Tạm kết

Như vậy là mình đã hướng dẫn các bạn 2 cách xử lí vấn đề trên rồi 😁👏. Hi vọng sau bài viết này khi gặp vấn đề tương tự các bạn sẽ tìm cách giải quyết chúng nhé. 😄

Bài viết nếu có sai sót hoặc khó hiểu chỗ nào thì các bạn có thể liên hệ với mình nhé. 🔥🔥🔥