Header halaman tetap tumpang tindih jangkar dalam halaman

Jika saya memiliki tajuk non-gulir di halaman HTML, perbaiki ke atas, dengan ketinggian yang ditentukan:

Apakah ada cara untuk menggunakan jangkar URL ( #fragmentbagian) untuk membuat browser gulir ke titik tertentu di halaman, tetapi tetap menghormati ketinggian elemen tetap tanpa bantuan JavaScript ?

http://foo.com/#bar

SALAH (tetapi perilaku umum): BENAR:
+ --------------------------------- + + -------------- ------------------- +
| BAR ///////////////////// header | | ////////////////////////// header |
+ --------------------------------- + + -------------- ------------------- +
| Ini adalah sisa dari Teks | | BAR |
| ... | | |
| ... | | Ini adalah sisa dari Teks |
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- +

Saya memiliki masalah yang sama. Saya memecahkannya dengan menambahkan kelas ke elemen jangkar dengan tinggi topbar sebagai nilai padding-top.

<h1><a class="anchor" name="barlink">Bar</a></h1>

Dan kemudian css:

.anchor { padding-top: 90px; }

Jika Anda tidak bisa atau tidak ingin mengatur kelas baru, tambahkan ::beforeelemen pseudo- tinggi-tetap ke kelas :targetsemu di CSS:

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

Atau gulir halaman relatif ke :targetdengan jQuery:

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

Saya menggunakan pendekatan ini:

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

Itu menambahkan elemen tak terlihat sebelum setiap target. Ini berfungsi IE8 +.

Berikut adalah solusi lainnya: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

Jawaban Resmi Bootstrap Diadopsi:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden; 
}

Kredit

Menggabungkan

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

dari: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Cara terbaik yang saya temukan untuk menangani masalah ini adalah (ganti 65px dengan tinggi elemen tetap Anda):

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

Jika Anda tidak suka menggunakan pemilih target, Anda juga dapat melakukannya dengan cara ini:

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

Catatan: contoh ini tidak akan berfungsi jika elemen target memiliki warna latar belakang yang berbeda dari orang tuanya. sebagai contoh:

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

dalam hal ini warna hijau elemen target saya akan menimpa elemen merah induknya di 65px. Saya tidak menemukan solusi CSS murni untuk menangani masalah ini tetapi jika Anda tidak memiliki warna latar belakang yang lain, solusi ini adalah yang terbaik.

Sementara beberapa solusi yang diusulkan bekerja untuk tautan fragmen (= tautan hash) di halaman yang sama (seperti tautan menu yang menggulir ke bawah), saya menemukan bahwa tidak ada yang bekerja di Chrome saat ini ketika Anda ingin menggunakan tautan fragmen yang masuk dari yang lain halaman .

Jadi menelepon www.mydomain.com/page.html#foo dari awal TIDAK akan mengimbangi target Anda di Chrome saat ini dengan salah satu dari solusi CSS atau solusi JS yang diberikan.

Ada juga laporan bug jQuery menjelaskan beberapa detail masalah.

LARUTAN

Satu-satunya opsi yang saya temukan sejauh ini yang benar-benar berfungsi di Chrome adalah JavaScript yang tidak dipanggil onDomReady tetapi dengan penundaan.

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

RINGKASAN

Tanpa JS penundaan solusi mungkin akan berfungsi di Firefox, IE, Safari, tetapi tidak di Chrome.

Saat spec CSS Scroll Snap masuk ke dalam game, hal ini mudah dilakukanscroll-margin-top properti . Saat ini berjalan di Chrome dan Opera (April 2019). Safari 11+ juga harus mendukung ini, tetapi saya tidak dapat menjalankannya di Safari 11. Mungkin kita harus menunggu orang untuk memperbaikinya di sana.

Contoh codepen

body {
  padding: 0;
  margin: 0;
}

h1,
p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
  position: sticky;
  top: 0;
  background-color: red;
  text-align: center;
  padding: 1rem;
}
.header .scroll {
  display: block;
  color: white;
  margin-bottom: 0.5rem;
}
.header .browsers {
  color: black;
  font-size: 0.8em;
}

<header class="header">
  <a class="scroll" href="#heading">Scroll to heading</a>
  <span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris. 
</p>

Untuk Chrome / Safari / Firefox Anda bisa menambahkan display: blockdan menggunakan margin negatif untuk mengkompensasi offset, seperti:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

Lihat contoh http://codepen.io/swed/pen/RrZBJo

Anda dapat melakukan ini dengan jQuery:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

Baru saja menemukan solusi CSS murni lain yang berfungsi seperti pesona bagi saya!

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

Ditemukan di situs ini !

Anda bisa mencoba ini:

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

Setel nilai padding atas ke tinggi aktual header Anda. Ini akan menimbulkan sedikit celah ekstra di bagian atas tajuk Anda, tetapi itu hanya akan terlihat ketika pengguna melompat ke jangkar dan kemudian gulir ke atas. Saya telah membuat solusi untuk situs saya sekarang, tetapi hanya menampilkan bilah tetap kecil di bagian atas halaman, tidak ada yang terlalu tinggi.

Saya sudah membuatnya bekerja dengan mudah dengan CSS dan HTML, menggunakan metode "jangkar: sebelum" yang disebutkan di atas. Saya pikir itu yang terbaik, karena tidak membuat bantalan besar antara divs Anda.

.anchor:before {
  content:"";
  display:block;
  height:60px; /* fixed header height*/
  margin:-60px 0 0; /* negative fixed header height */
}

Tampaknya tidak berfungsi untuk div pertama di halaman, tetapi Anda bisa mengatasinya dengan menambahkan padding ke div pertama.

#anchor-one{padding-top: 60px;}

Ini biola yang berfungsi: http://jsfiddle.net/FRpHE/24/

Ini bekerja untuk saya:

LINK HTML ke Anchor:

<a href="#security">SECURITY</a>

Anchor HTML:

<a name="security" class="anchor"></a>

CSS:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

Saya menggunakan jawaban Jpsy, tetapi untuk alasan kinerja saya hanya mengatur timer jika hash ada di URL.

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

function delayedFragmentTargetOffset(){
      var offset = $(':target').offset();
      if(offset){
          var scrollto = offset.top - 80; // minus fixed header height
          $('html, body').animate({scrollTop:scrollto}, 0);
          $(':target').highlight();
      }
  };

Saya punya banyak masalah dengan banyak jawaban di sini dan di tempat lain karena jangkar saya yang dibookmark adalah header bagian di halaman FAQ, jadi mengimbangi header tidak membantu karena konten lainnya hanya akan tetap berada di tempatnya. Jadi saya pikir saya akan memposting.

Apa yang akhirnya saya lakukan adalah gabungan dari beberapa solusi:

1. CSS:

   .bookmark {
       margin-top:-120px;
       padding-bottom:120px; 
       display:block;
   }

Di mana "120px" adalah tinggi header tetap Anda (mungkin ditambah margin).

2. HTML tautan bookmark:

   <a href="#01">What is your FAQ question again?</a>

3. HTML konten yang di-bookmark:

   <span class="bookmark" id="01"></span>
   <h3>What is your FAQ question again?</h3>
   <p>Some FAQ text, followed by ...</p>
   <p>... some more FAQ text, etc ...</p>

Hal yang baik tentang solusi ini adalah bahwa span elemen tersebut tidak hanya disembunyikan, pada dasarnya runtuh dan tidak konten Anda.

Saya tidak dapat mengambil banyak pujian untuk solusi ini karena berasal dari berbagai sumber daya yang berbeda, tetapi ini bekerja paling baik untuk saya dalam situasi saya.

Anda dapat melihat hasil aktual di sini .

Saya tidak beruntung dengan jawaban yang tercantum di atas dan akhirnya menggunakan solusi ini yang bekerja dengan sempurna ...

Buat rentang kosong tempat Anda ingin mengatur jangkar.

<span class="anchor" id="section1"></span>
<div class="section"></div>

Dan terapkan kelas berikut:

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

Solusi ini akan berfungsi bahkan jika bagian-bagian memiliki latar belakang berwarna yang berbeda! Saya menemukan solusinya di tautan ini.

Rasanya agak gila di pikiran saya, tetapi sebagai solusi css saja Anda dapat menambahkan padding ke elemen berlabuh aktif menggunakan :targetpemilih:

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

Saya menemukan saya harus menggunakan kedua MutttenXd 's dan Badabam ' solusi CSS s bersama-sama, sebagai yang pertama tidak bekerja di Chrome dan yang kedua tidak bekerja di Firefox:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

Cara saya menemukan menjadi terbersih adalah yang berikut:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

Pendekatan intrusif minimal menggunakan jQuery:

Tautan:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

Kandungan:

<h3 id="my-anchor-1">Here is Anchor 1</a>

Naskah:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

Dengan menetapkan kelas tautan-jangkar ke tautan, perilaku tautan lain (seperti akordeon atau kontrol tab) tidak terpengaruh.

Pertanyaannya tidak ingin javascript tetapi pertanyaan lain yang lebih populer ditutup karena yang ini dan saya tidak bisa menjawabnya.

Saya membutuhkan sesuatu yang berfungsi untuk tautan masuk, tautan di halaman, DAN yang dapat ditargetkan oleh JS sehingga laman dapat menanggapi perubahan ketinggian header.

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2> 

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

Itu z-index: -1 memungkinkan link di 'daerah bantalan' di atas sebuah fragmen-target yang masih dapat diklik, seperti berkomentar oleh @MuttenXd pada jawabannya

Saya belum menemukan masalah di IE 11, Edge 15+, Chrome 38+, FF 52+, atau Safari 9.1+

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

Kode ini harus melakukan trik. Tukar 45px untuk ketinggian bilah header Anda.

EDIT: Jika menggunakan jQuery adalah sebuah opsi, saya juga telah berhasil menggunakan jQuery.localScroll dengan set nilai offset. Opsi offset adalah bagian dari jQuery.scrollTo, yang menjadi dasar jQuery.localScroll. Demo tersedia di sini: http://demos.flesler.com/jquery/scrollTo/ (jendela kedua, di bawah 'offset')

Berikut ini adalah solusi jquery lengkap yang akan bekerja di IE:

Misalkan elemen bilah navigasi adalah seperti ini:

<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>

Anda dapat menggunakan cuplikan jquery berikut untuk mengimbangi gulir:

$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}

Diimplementasikan menggunakan :beforeberfungsi dengan baik sampai kami menyadari bahwa elemen pseudo sebenarnya menutupi dan memblokir peristiwa pointer yang berada di dalam area elemen pseudo. Menggunakan sesuatu seperti pointer-events: nonepada :beforeatau bahkan langsung pada jangkar tidak berpengaruh.

Apa yang akhirnya kami lakukan adalah membuat posisi jangkar menjadi absolut dan kemudian menyesuaikan posisinya menjadi offset / ketinggian area tetap.

Jangkar Offset tanpa Peristiwa Blocker Pointer

.section-marker {

    position: absolute;
    top: -300px;
}

Nilai dengan ini adalah bahwa kami tidak memblokir elemen apa pun yang mungkin termasuk dalam 300px tersebut. The downside adalah bahwa mengambil posisi elemen itu dari Javascript perlu memperhitungkan yang mengimbangi sehingga setiap logika harus disesuaikan.

Ini adalah bagaimana saya mendapatkannya untuk akhirnya pergi ke tempat yang tepat ketika Anda mengklik navigasi. Saya menambahkan pengendali acara untuk klik navigasi. Kemudian Anda bisa menggunakan "scrollBy" untuk naik pada offset.

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });

Saya membuat div dengan beberapa jeda baris dan memberikan id itu, saya kemudian meletakkan kode yang ingin saya perlihatkan di bawahnya. Tautan kemudian akan membawa Anda ke ruang di atas gambar dan tajuk tidak akan lagi menghalangi:

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

Tentu saja, Anda dapat mengubah jumlah jeda baris sesuai dengan kebutuhan Anda. Ini berfungsi dengan baik untuk saya, tidak yakin apakah ada masalah, saya masih belajar HTML.

Gunakan skrip ini

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});

Saya pikir pendekatan ini lebih bermanfaat:

<h2 id="bar" title="Bar">Bar</h2>

[id]:target {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

[id]:target::before {
    content: attr(title);
    top: 120px;
    position: relative;
    visibility: visible;
}

Anda sekarang dapat menggunakan scroll-margin-top , yang cukup banyak diadopsi .

Cukup tambahkan CSS berikut ke elemen yang ingin Anda gulir:

.element {
  scroll-margin-top: 2em;
}