Fester Seitenkopf überlappt in-Seite Anker
https://stackoverflow.com/questions/4086107
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wenn ich einen nicht-Scrolling-Header in einer HTML-Seite, auf die Oberseite befestigt ist, eine definierte Höhe:
Gibt es eine Möglichkeit, den URL-Anker (das #fragment Teil) zu verwenden, um den Browser blättern zu einem bestimmten Punkt in der Seite zu haben, aber immer noch die Höhe des festen Elements respektieren ohne die Hilfe von JavaScript ?
http://foo.com/#bar
WRONG (but the common behavior): CORRECT: +---------------------------------+ +---------------------------------+ | BAR///////////////////// header | | //////////////////////// header | +---------------------------------+ +---------------------------------+ | Here is the rest of the Text | | BAR | | ... | | | | ... | | Here is the rest of the Text | | ... | | ... | +---------------------------------+ +---------------------------------+
Lösung
Ich hatte das gleiche Problem. Ich löste es durch eine Klasse auf das Ankerelement mit der topbar Höhe wie der padding-top Wert hinzugefügt wird.
<h1><a class="anchor" name="barlink">Bar</a></h1>
Und dann einfach die CSS:
.anchor { padding-top: 90px; }
Andere Tipps
Wenn Sie nicht oder können nicht eine neue Klasse setzen wollen, fügen Sie einen festen Höhe ::before pseudo-Element auf den :target pseudo-Klasse in CSS:
:target::before {
content: "";
display: block;
height: 60px; /* fixed header height*/
margin: -60px 0 0; /* negative fixed header height */
}
oder blättern Sie die Seite in Bezug auf :target mit jQuery:
var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
Ich benutze diesen Ansatz:
/* add class="jumptarget" to all targets. */
.jumptarget::before {
content:"";
display:block;
height:50px; /* fixed header height*/
margin:-50px 0 0; /* negative fixed header height */
}
Es fügt ein unsichtbares Element vor jedem Ziel. Es funktioniert IE8 +.
Hier sind weitere Lösungen: http://nicolasgallagher.com/jump-links-and-viewport-positioning/
Die beste Art und Weise, dass ich dieses Problem umgehen zu finden ist (ersetzen 65px mit fester Elementhöhe):
div:target {
padding-top: 65px;
margin-top: -65px;
}
Wenn Sie nicht wie die Ziel Selektor können Sie es auch in diesem Art und Weise:
.my-target {
padding-top: 65px;
margin-top: -65px;
}
Hinweis: Dieses Beispiel wird nicht funktionieren, wenn das Zielelement eine backgoundfarbe hat, dass differant aus seinen Eltern. zum Beispiel:
<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>
in diesem Fall die grüne Farbe meines Zielelementes seine Eltern rotes Element in 65px überschreibt. Ich fand keine reine CSS-Lösung, dieses Problem zu umgehen, aber wenn Sie nicht über eine andere Hintergrundfarbe diese Lösung die beste ist.
Während einige der vorgeschlagenen Lösungen arbeiten für Fragment-Links (= hash Links) innerhalb die gleiche Seite (wie ein Menü-Link, dass nach unten scrollt), fand ich, dass keiner von ihnen in der aktuellen Chrome funktioniert, wenn wollen Sie in kommenden Fragment Links verwenden, von anderen Seiten .
So www.mydomain.com/page.html#foo von Grund auf neu Aufruf wird nicht Offset Ihr Ziel in der aktuellen Chrome mit einem der angegebenen CSS-Lösungen oder JS-Lösungen.
Es gibt auch eine jQuery Bug-Report einige Details des Problems beschreibt.
SOLUTION
Die einzige Option, die ich bisher gefunden, dass wirklich in Chrome funktioniert, ist JavaScript, das nicht genannt wird onDomReady aber mit einer Verzögerung.
// 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);
}
}
Zusammenfassung
Ohne eine JS Verzögerung Lösungen wird wahrscheinlich Arbeit in Firefox, IE, Safari, aber nicht in Chrome.
Für Chrome / Safari / Firefox können Sie ein display: block hinzufügen und eine negative Marge verwenden, um die Offset zu kompensieren, wie:
a[name] {
display: block;
padding-top: 90px;
margin-top: -90px;
}
Siehe Beispiel http://codepen.io/swed/pen/RrZBJo
Sie können dies tun mit jQuery:
var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);
Sie könnten versuchen, diese:
<style>
h1:target { padding-top: 50px; }
</style>
<a href="#bar">Go to bar</a>
<h1 id="bar">Bar</h1>
Stellen Sie die Top-Polsterung Wert auf die tatsächliche Höhe des Headers. Dadurch wird eine leichte zusätzliche Lücke an der Spitze Ihres Kopfes einführen, aber es wird nur dann sichtbar, wenn der Benutzer auf den Anker springt und rollt dann nach oben. Ich habe jetzt diese Lösung für meine Website gemacht, aber es zeigt nur eine kleine feste Leiste am oberen Rand der Seite, nichts zu hoch.
Es funktioniert für mich:
HTML-Link auf Anchor:
<a href="#security">SECURITY</a>
HTML-Anker:
<a name="security" class="anchor"></a>
CSS:
.anchor::before {
content: "";
display: block;
margin-top: -50px;
position: absolute;
}
Ich habe es einfach mit CSS und HTML-Code, mit dem „Anker: vor“ Verfahren, das oben erwähnt wird. Ich denke, es ist das am besten funktioniert, weil es nicht massiv schafft Polsterung zwischen divs.
.anchor:before {
content:"";
display:block;
height:60px; /* fixed header height*/
margin:-60px 0 0; /* negative fixed header height */
}
Es scheint nicht zu Arbeit zum ersten div auf der Seite, aber Sie können entgegen, dass durch Polsterung an diesem ersten div hinzugefügt wird.
#anchor-one{padding-top: 60px;}
Hier ist eine Arbeits Geige: http://jsfiddle.net/FRpHE/24/
Ich bin mit @ Jpsy Antwort, aber aus Leistungsgründen Ich gründe nur den Timer, wenn der Hash in der URL vorhanden ist.
$(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();
}
};
html {
scroll-padding-top: 70px; /* height of sticky header */
}
aus: https: //css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
Es fühlt sich ein wenig hacky meiner puristischen Geist, sondern als CSS-only Lösung Sie Polsterung an das aktive verankerte Element mit dem :target Selektor hinzufügen:
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>
Ich fand ich zu verwenden, hatten beide MutttenXd 's und Badabam ' s CSS-Lösungen zusammen, wie das tat zunächst nicht Arbeit in Chrome und die zweite hat nicht funktioniert in 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>
...
Die Art und Weise, dass ich finde die sauberste zu sein, ist die folgende:
#bar::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
pointer-events: none;
}
hatte ich eine Menge Ärger mit vielen der Antworten hier und anderswo, wie meine Lesezeichen Anker Abschnittsüberschriften in einer FAQ-Seite waren, so die Header-Ausgleich keine Hilfe tat, wie der Rest des Inhalts würde nur bleiben, wo es war. Also dachte ich, ich poste würde.
Was ich am Ende war dabei ein Verbund von wenigen Lösungen:
-
Die CSS:
.bookmark { margin-top:-120px; padding-bottom:120px; display:block; }
Wo "120px" ist Ihre feste Kopfhöhe (vielleicht plus einige Marge).
-
Die Verknüpfung mit Lesezeichen HTML:
<a href="#01">What is your FAQ question again?</a> -
Der Lesezeichen Inhalt HTML:
<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>
Das Gute an dieser Lösung ist, dass das span Element nicht nur versteckt, ist es im Wesentlichen kollabiert ist und nicht polstern Sie Ihre Inhalte.
Ich kann nicht viel Kredit für diese Lösung nehmen, wie es von einer Beute von verschiedenen Ressourcen kommt, aber es funktionierte gut für mich in meiner Situation.
Sie können das tatsächliche Ergebnis finden Sie unter hier .
Wie CSS Scroll-Snap spec kommt in Spiel, es ist leicht möglich mit scroll-margin-top Eigenschaft. Derzeit läuft auf Chrome und Opera (April 2019). Safari 11+ sollte auch dies unterstützen, aber ich war nicht in der Lage es auf Safari laufen 11. Wahrscheinlich müssen wir warten, Jungs, es zu beheben overthere.
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>
Eine minimal invasive Methode mit jQuery:
Link:
<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>
Inhalt:
<h3 id="my-anchor-1">Here is Anchor 1</a>
Script:
$(".anchor-link").click(function() {
var headerHeight = 120;
$('html, body').stop(true, true).animate({
scrollTop: $(this.hash).offset().top - headerHeight
}, 750);
return false;
});
Durch die Zuordnung der Anker-Link-Klasse auf die Links, das Verhalten anderer Verbindungen (wie Akkordeon oder Registerkarten) sind nicht betroffen.
Die Frage will nicht javascript aber die anderen populäreren Frage weil dieser einen geschlossen und ich konnte dort nicht beantworten.
Ich brauchte etwas, das funktioniert für eingehende Links, Links auf Seite, und das kann von JS gezielt werden, so dass die Seite auf Änderungen in der Kopfhöhe reagiert
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;
}
Die z-index: -1 erlaubt Links in dem ‚Füll-Bereich‘ über einem Fragment-Ziel noch angeklickt werden, wie @MuttenXd auf seiner Antwort
Ich habe kein Problem noch in IE gefunden 11 Edge 15+, 38+ Chrome, FF 52+ oder Safari 9.1 +
Ich hatte kein Glück mit der Antwort der oben aufgeführt ist und am Ende der Verwendung dieser Lösung, die perfekt funktioniert ...
Erstellen Sie eine leere Spanne, wo Sie Ihren Anker festlegen möchten.
<span class="anchor" id="section1"></span>
<div class="section"></div>
Und gilt die folgende Klasse:
.anchor {
display: block;
height: 115px; /* same height as header */
margin-top: -115px; /* same height as header */
visibility: hidden;
}
Diese Lösung funktioniert sogar, wenn die Abschnitte verschiedene farbige Hintergründe haben! Ich fand die Lösung bei diesem Link.
<div style="position:relative; top:-45px;">
<a name="fragment"> </a>
</div>
Dieser Code sollte es tun. Swap-out 45px für die Höhe der Kopfleiste.
EDIT: Wenn jQuery eine Option ist, habe ich auch erfolgreich jQuery.localScroll mit einem Offsetwert Satz verwenden. Die Offset-Option ist ein Teil von jQuery.scrollTo, die jQuery.localScroll auf gebaut wird. Eine Demo finden Sie hier: http://demos.flesler.com/jquery/scrollTo/ (zweites Fenster unter 'offset')
Dies ist die komplette jquery-Lösung, die in IE funktioniert:
Angenommen, die Navigationsleiste Elemente sind so etwas wie folgt aus:
<ul>
<li><a class="navigation" href="/#contact-us">Contact us</a></li>
<li><a class="navigation" href="/#about-us">About us</a></li>
</ul>
Sie können folgende Jquery Snippet verwenden, um die Rolle Offset:
$(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) {
});
}
Umgesetzt mit :before funktionierte großartig, bis wir erkannten, dass das Pseudoelement tatsächlich bedeckte und Zeiger Ereignisse blockieren, die sat innerhalb den Bereich der Pseudo-Element. Mit so etwas wie pointer-events: none auf dem :before oder sogar direkt auf dem Anker hatte keine Auswirkungen.
Was wir am Ende tun machte die Positionierung des Ankers absoluten und dann die Position Einstellen der Offset / Höhe des festen Bereichs.
Anchor Offset ohne Zeiger Ereignisse Blocking
.section-marker {
position: absolute;
top: -300px;
}
Der Wert dabei ist, dass wir keine Elemente blockiert, die innerhalb dieser 300px fallen könnten. Der Nachteil ist, dass dieses Elements der Position von Javascript greifen berücksichtigen muss, dass es so jede Logik versetzt hatte angepasst werden.
Das ist, wie ich es endlich an den richtigen Ort zu gehen, wenn Sie auf der Navigation klicken. Ich habe für die Navigation Klicks einen Event-Handler. Dann können Sie einfach „scrollBy“ verwenden, um auf den Offset zu bewegen.
var offset = 90;
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
habe ich ein div mit ein paar Zeilenumbrüche und gab, dass die ID, ich dann den Code habe ich darunter zeigen wollte. Der Link würde Sie dann, um den Raum über dem Bild und der Kopf nicht mehr im Weg wäre:
<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">
Natürlich können Sie die Anzahl der Zeilenumbrüche ändern, um Ihre Bedürfnisse anzupassen. Das funktionierte perfekt für mich, nicht sicher, ob es irgendwelche Probleme gibt, obwohl, ich bin immer noch HTML lernen.
verwendet, um dieses Skript
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top -140
}, 1000);
});
// handle hashes when page loads
// <http://stackoverflow.com/a/29853395>
function adjustAnchor() {
const $anchor = $(':target');
const fixedElementHeight = $('.navbar-fixed-top').outerHeight();
if ($anchor.length > 0)
window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
}
$(window).on('hashchange load', adjustAnchor);
$('body').on('click', "a[href^='#']", function (ev) {
if (window.location.hash === $(this).attr('href')) {
ev.preventDefault();
adjustAnchor();
}
});
ich diese Methode verwenden, weil aus irgendeinem Grund keine der anderen Lösungen vorgeschlagen, für mich tatsächlich gearbeitet. Ich verspreche, ich versuchte.
section {
position: relative;
border-top: 52px solid transparent; /* navbar height +2 */
margin: -30px 0 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
section:before {
content: "";
position: absolute;
top: -2px;
left: 0;
right: 0;
border-top: 2px solid transparent;
}
Ersetzen Sie Abschnitt von einer Klasse, wenn Sie es vorziehen.
Quelle: Jump Links und Ansichtsfenster Positionierung
- Getestet auf Firefox 45 und Chrome 52.
- Bootstrap-Version: 3.3.7
Für diejenigen, die mich nicht glauben, dass ich vorbereitet freundlicherweise eine jsfiddle mit der Lösung darin: SOLUTION
CSS Trick wird eine Abhilfe sein. Eine richtige Lösung, die in jedem Szenario funktionieren kann mit jQuery implementiert werden.
Siehe https://codepen.io/pikeshmn/pen/mMxEdZ
Ansatz:. Wir bekommen die Höhe des festen nav mit document.getElementById ( 'header') offset Und versetzt die Schriftrolle auf diesen Wert.
var jump=function(e){
e.preventDefault(); //prevent "hard" jump
var target = $(this).attr("href"); //get the target
//perform animated scrolling
$('html,body').animate(
{
scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5 //get top-position of target-element and set it as scroll target
},1000,function() //scrolldelay: 1 seconds
{
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
}
$(document).ready(function()
{
$('a[href*="#"]').bind("click", jump); //get all hrefs
return false;
});
P. S:
- Es enthält einen schönen 5 Pixel Unterschied zwischen Kopf- und Ziel
- Scroll-Effekt ist nicht schwer, eher glatt; Smooth Scrolling
