Ich glaube, Ihre Theorie ist richtig. Unten sind 3 Beispiele, eines mit $(document).ready(), eines mit $(window).load(), und eines mit Logik, um die Anpassung nach dem ersten Scroll (aber nicht nachfolgende Scrolls) vorzunehmen.
Alle 3 zeigen erwartete $(window).scrollTop() Werte, aber $(document).ready() erscheint immer in der Hash-Position und nicht in der erwarteten verschobenen Position. $(window).load() erscheint manchmal mit der erwarteten 80px-Anpassung, aber es ist nicht konsistent. Die dritte Option verwendet Logik, die immer funktionieren sollte, obwohl es zugegebenermaßen ein wenig klobig ist. Vielleicht gibt es eine bessere Lösung, aber ich hoffe, das hilft!
Versuchen Sie, jedes Snippet zu erweitern und wiederholt auf "Code-Snippet ausführen" zu klicken, um die Ergebnisse über mehrere Testläufe hinweg anzuzeigen.
nie funktioniert: Mit $(document).ready():
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
$(document).ready(function() {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>
arbeitet manchmal: Mit $(window).load():
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
$(window).load(function() {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>
A mmer Werke: die Logik erste Spirale zu erkennen:
if (!window.location.hash) {
window.location = window.location + "#id-of-some-element";
}
var loading = true;
$(window).scroll(function(event) {
if (loading) {
console.log($(window).scrollTop());
if (window.location.hash) {
$(window).scrollTop($(window).scrollTop() - 80);
console.log($(window).scrollTop());
}
loading = false;
}
});
.tall-div {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tall-div">DIV 1</div>
<div id="id-of-some-element">Some Element</div>
<div class="tall-div">DIV 2</div>