Pertanyaan Saat menavigasi ke #id, elemen disembunyikan di bawah judul posisi tetap [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Saya memiliki navbar Bootstrap 3.0 dengan yang selalu terlihat di bagian atas halaman, tetapi ini bisa mewakili apa pun yang position properti adalah fixed.

<nav class="navbar navbar-default navbar-fixed-top" >

Karena memperbaiki itu mengambilnya dari aliran dokumen, saya perlu menambahkan beberapa padding ke elemen body sehingga konten tidak disembunyikan ketika halaman pertama kali ditampilkan

body {
    padding-top: 70px;
}

Masalahnya adalah ketika saya mengklik item menu untuk menavigasi ke suatu bagian, seperti #About maka bagian atas dipotong.

jsFiddle

Q: Apakah ada cara untuk menambahkan padding sehingga item lengkap akan terlihat ketika dinavigasi ke?


5
2017-09-22 20:28


asal


Jawaban:


Saya akan mengatur overflow: hidden di badan dan menambahkan konten situs Anda ke elemen yang dapat digulir.

Tata letak Anda akan terlihat seperti ini:

<html>
<head></head>
<body>
    <div class="navbar"></div>
    <div class="wrap">
        <!-- rest of content for site -->
    </div>
</body>
</html>

Tambahkan aturan CSS ini:

html, body {
    overflow: hidden;
    height: 100%;
}
body {
    padding-top: 50px;
}
.wrap {
    height: 100%;
    overflow: auto;
}

Lihat biolaku


3
2017-09-22 20:48



Jawaban yang Diperbarui:

Seperti yang dijelaskan dalam ini menjawab, Masalahnya adalah, browser Anda selalu ingin menggulir jangkar Anda ke bagian atas jendela yang tepat. Jika Anda mengatur anchor Anda di mana teks Anda benar-benar dimulai, itu akan terhalang oleh bilah menu Anda.

Sebagai gantinya, mengatur padding-top untuk penampung ke jumlah offset yang Anda inginkan, dan margin-top untuk wadah ke seberang dari padding-top. Sekarang blok wadah dan jangkar mulai di bagian atas halaman yang tepat, tetapi isi di dalamnya tidak mulai sampai di bawah bilah menu.

section {
    padding-top: 60px;
    margin-top: -60px;
}

jsFiddle


2
2017-09-22 20:43