Sabit sayfa başlığı, sayfa içi bağlantılarla çakışıyor

Tanımlı bir yüksekliğe sahip bir HTML sayfasında, üste sabitlenmiş, kaydırılmamış bir üstbilgim varsa:

#fragmentTarayıcının sayfada belirli bir noktaya kaydırması, ancak yine de JavaScript'in yardımı olmadan sabit öğenin yüksekliğine saygı duyması için URL çapasını ( bölüm) kullanmanın bir yolu var mı ?

http://foo.com/#bar

YANLIŞ (ancak ortak davranış): DOĞRU:
+ --------------------------------- + + -------------- ------------------- +
| BAR ///////////////////// başlık | | //////////////////////// başlık |
+ --------------------------------- + + -------------- ------------------- +
| İşte Metnin Geri Kalanı | | BAR |
| ... | | |
| ... | | İşte Metnin Geri Kalanı |
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- +

Ben de aynı problemi yaşadım. Dübel elemanına dolgu çubuğu değeri olarak üst çubuk yüksekliğine sahip bir sınıf ekleyerek çözdüm.

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

Ve sonra sadece css:

.anchor { padding-top: 90px; }

Yeni bir sınıf ayarlamak istemiyorsanız veya istemiyorsanız ::before, :targetCSS'deki sözde sınıfa sabit yükseklikte bir sözde öğe ekleyin :

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

Veya :targetjQuery ile ilgili sayfayı kaydırın :

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

Bu yaklaşımı kullanıyorum:

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

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

Her hedefin önüne görünmez bir öğe ekler. IE8 + ile çalışır.

İşte daha fazla çözüm: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

Resmi Bootstrap Kabul Edildi Cevabı:

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

Kredi

Birleştirmek

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

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

Bu sorunu ele almanın en iyi yolu (65px'i sabit öğe yüksekliğinizle değiştirin):

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

Hedef seçiciyi kullanmak istemiyorsanız, bu şekilde de yapabilirsiniz:

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

Not: hedef öğenin üst öğesinden farklı bir arka plan rengi varsa bu örnek çalışmaz. Örneğin:

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

bu durumda hedef hedef öğemin yeşil rengi üstteki kırmızı öğesinin üzerine 65 piksel yazılacaktır. Bu sorunu çözmek için herhangi bir saf CSS çözümü bulamadım, ancak başka bir arka plan renginiz yoksa bu çözüm en iyisidir.

Önerilen çözümlerin bazı parçası bağlantılar (= karma bağlantılar) için çalışırken içinde , onlardan hiçbirinin sen parça bağlantılar gelen kullanmak istediğinizde şimdiki Chrome'da çalıştı bulundu (kaydırır aşağı bir menü bağlantısını gibi) aynı sayfada diğerinden sayfaları .

Sıfırdan www.mydomain.com/page.html#foo arayarak Yani olacak DEĞİL verilen CSS çözümleri veya JS çözümlerin herhangi cari Chrome'da hedef ofset.

Sorunun bazı ayrıntılarını açıklayan bir jQuery hata raporu da var .

ÇÖZÜM

Şimdiye kadar Chrome'da gerçekten işe yarayan tek seçenek onDomReady'de değil, gecikmeli olarak JavaScript.

// 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);
    }
}

ÖZET

JS gecikme olmadan çözümler büyük olasılıkla Firefox, IE, Safari'de çalışır, ancak Chrome'da çalışmaz.

As CSS Kaydırma çekin Spec oyun haline gelir gelmez kolayca mümkündür scroll-margin-topözelliği. Şu anda Chrome ve Opera'da çalışıyor (Nisan 2019). Ayrıca Safari 11+ bunu desteklemelidir, ancak Safari 11'de çalıştıramadım. Muhtemelen erkeklerin bunu düzeltmesini beklemek zorundayız.

Codepen örneği

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>

Chrome / Safari / Firefox display: blockiçin, ofseti telafi etmek için aşağıdaki gibi bir ekleyebilir ve negatif bir kenar boşluğu kullanabilirsiniz:

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

Örneğe bakın http://codepen.io/swed/pen/RrZBJo

Bunu jQuery ile yapabilirsiniz:

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

Benim için bir charme gibi çalışan başka bir saf CSS çözümü keşfettim!

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

Bu sitede bulundu !

Bunu deneyebilirsiniz:

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

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

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

Üst dolgu değerini başlığınızın gerçek yüksekliğine ayarlayın. Bu, başlığınızın üstünde hafif bir ekstra boşluk oluşturacaktır, ancak yalnızca kullanıcı bağlantıya atladığında ve yukarı kaydırdığında görünür. Sitem için şu anda bu çözümü oluşturdum, ancak sayfanın üstünde sadece küçük bir sabit çubuk var, çok yüksek bir şey yok.

Yukarıda "anchor: before" yöntemini kullanarak, CSS ve HTML ile kolayca çalıştım. En iyi sonucu verdiğini düşünüyorum, çünkü div'larınız arasında büyük bir dolgu oluşturmuyor.

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

Sayfadaki ilk div için çalışmıyor gibi görünüyor, ancak bu ilk div'e dolgu ekleyerek buna karşı koyabilirsiniz.

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

İşte çalışan bir keman: http://jsfiddle.net/FRpHE/24/

Benim için çalışıyor:

Sabitlenecek HTML LINK:

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

HTML Bağlantısı:

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

CSS:

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

Yukarıda listelenen cevapta hiç şansım yoktu ve mükemmel çalışan bu çözümü kullandım ...

Çapanızı ayarlamak istediğiniz yerde boş bir aralık oluşturun.

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

Ve aşağıdaki sınıfı uygulayın:

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

Bu çözüm, bölümler farklı renkli arka planlara sahip olsa bile çalışacaktır! Çözümü bu linkte buldum .

@ Jpsy'nin yanıtını kullanıyorum, ancak performans nedenleriyle zamanlayıcıyı yalnızca URL'de karma varsa ayarlıyorum.

$(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();
      }
  };

Yer işaretli çapalarım bir SSS sayfasındaki bölüm başlıkları olduğu için burada ve başka yerlerde birçok cevapla çok fazla sorun yaşadım, bu nedenle başlığın dengelenmesi içeriğin geri kalanı sadece olduğu yerde kaldığı için yardımcı olmadı. Ben de göndereceğimi düşündüm.

Yaptığım şey birkaç çözümün bir bileşimiydi:

1. CSS:

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

"120px" sabit başlık yüksekliğiniz olduğunda (belki artı bir miktar marj).

2. Yer işareti bağlantısı HTML'si:

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

3. Yer işareti konulmuş içerik HTML'si:

   <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>

Bu çözümle ilgili iyi olan şey, spanöğenin sadece gizli değil, esasen daraltılmış olması ve içeriğinizi doldurmamasıdır.

Farklı kaynakların bir parçasından geldiği için bu çözüm için fazla kredi alamıyorum, ancak durumumda benim için en iyisi oldu.

Gerçek sonucu burada görebilirsiniz .

Saf zihnime biraz huzursuz hissettiriyor, ancak sadece css bir çözüm olarak :targetseçiciyi kullanarak etkin bağlantılı öğeye dolgu ekleyebilirsiniz :

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>

Ben kullanmak zorunda bulundu hem MutttenXd 'ın ve Badabam ilk Chrome'da çalışma vermedi ve ikinci Firefox'ta işi değildir yaptığı gibi, birbirine' ın CSS çözümleri:

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>
...

En temiz olduğunu düşündüğüm yol şudur:

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

JQuery kullanarak minimal müdahaleci bir yaklaşım:

Bağlantı:

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

İçerik:

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

Senaryo:

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

Bağlantılara bağlantı bağlantısı sınıfı atandığında, diğer bağlantıların (akordeon veya sekme denetimleri gibi) davranışları etkilenmez.

Soru javascript istemiyor, ancak diğer popüler soru bu yüzden kapalı ve orada cevap veremedim.

Gelen bağlantılar, sayfadaki bağlantılar için çalışan ve sayfanın başlık yüksekliğindeki değişikliklere yanıt verebilmesi için JS tarafından hedeflenebilecek bir şeye ihtiyacım vardı

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;
}

z-index: -1Onun cevabını üzerinde @MuttenXd tarafından tavsiye edildiği gibi, bir parça-hedefin üzerinde padding alanında 'de linkler hala tıklanabilir olmasını sağlar

IE 11, Edge 15+, Chrome 38+, FF 52+ veya Safari 9.1+'de henüz bir sorun bulamadım

Artık kullanabilirsiniz kaydırma margin-top edilir oldukça yaygın olarak benimsenen .

Kaydırmak istediğiniz öğeye aşağıdaki CSS'yi eklemeniz yeterlidir:

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

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

Bu kod hile yapmalı. Başlık çubuğunuzun yüksekliği için 45 piksel değiştirin.

EDIT: jQuery kullanmak bir seçenek ise, ben de ofset değer kümesi ile jQuery.localScroll kullanarak başarılı oldum. Ofset seçeneği jQuery.scrollTo öğesinin bir parçası olup, jQuery.localScroll öğesi üzerine kuruludur. Bir demo burada bulunabilir: http://demos.flesler.com/jquery/scrollTo/ (ikinci pencere, 'ofset' altında)

İşte IE'de çalışacak eksiksiz bir jquery çözümü:

Gezinme çubuğu öğelerinin aşağıdaki gibi olduğunu varsayalım:

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

Kaydırma değerini dengelemek için aşağıdaki jquery snippet'ini kullanabilirsiniz:

$(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) {

    });
}

:beforeSözde öğenin, sözde öğenin alanı içinde yer alan işaretçi olaylarını gerçekten kapsadığını ve engellediğini anlayana kadar kullanılarak çok çalıştı . Ankraj üzerinde veya hatta doğrudan çapa pointer-events: noneüzerinde bir şey kullanmanın :beforehiçbir etkisi yoktu.

Yaptığımız şey, çapanın konumlandırmasını mutlak hale getirmek ve ardından konumunu sabit alanın ofseti / yüksekliği olarak ayarlamaktı.

İşaretçi Olaylarını Engellemeden Ofset Çapası

.section-marker {

    position: absolute;
    top: -300px;
}

Bunun değeri, 300 piksele düşebilecek herhangi bir öğeyi engellemememizdir. Dezavantajı, o öğenin konumunu Javascript'ten almanın, bu ofseti hesaba katması gerektiği için, oradaki herhangi bir mantığın ayarlanması gerektiğidir.

Navigasyonu tıkladığınızda nihayet doğru yere gitmesini sağladım. Gezinme tıklamaları için bir etkinlik işleyici ekledim. Sonra ofseti yukarı taşımak için sadece "scrollBy" kullanabilirsiniz.

var offset = 90;

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

Birkaç satır sonu ile bir div oluşturdum ve id verdi, sonra altına göstermek istediğim kodu koydu. Bağlantı daha sonra görüntünün üstündeki boşluğa götürür ve başlık artık yoluna girmez:

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

Tabii ki, satır sonlarının sayısını ihtiyaçlarınıza göre değiştirebilirsiniz. Bu benim için mükemmel çalıştı, ancak herhangi bir sorun olup olmadığından emin değilim, hala HTML öğreniyorum.

Bu komut dosyasını kullandı

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

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

Bu yaklaşımın daha faydalı olduğunu düşünüyorum:

<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;
}