Heim >Web-Frontend >CSS-Tutorial >Wie kann man die CSS-Wertgrenzen der Fenster-Scrolling-Animation begrenzen?
Wie kann man die CSS-Wertgrenzen der Fenster-Scrolling-Animation begrenzen?
- Patricia ArquetteOriginal
- 2024-11-11 20:18:03620Durchsuche
Begrenzung der CSS-Wertgrenzen der Fenster-Scroll-Animation
In diesem Szenario tritt bei einem Benutzer ein Problem auf, bei dem ein Kartenelement beim Scrollen verschoben wird unten auf der Seite. Die Karte scrollt jedoch unbegrenzt weiter, sodass der Benutzer aufgrund der vorhandenen Fußzeile nicht das Ende der Seite erreichen kann.
Ziel ist es, das Scrollen der
Der bereitgestellte JavaScript-Code animiert die Karte so, dass sie sich bewegt, wenn der Benutzer scrollt:
<pre class="brush:php;toolbar:false">$(function() {
var $sidebar = $("#map"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
}
else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
Lösung des Problems
Die Verwendung der animate()-Methode innerhalb der Scroll-Funktion ist nicht ratsam, da dies aufgrund von zu Konflikten führen kann Kontinuierliche Änderungen des Bildlaufwerts, wodurch verhindert wird, dass jQuery sich wiederholende Animationen ausführt. Die Funktion stop() allein löst das Problem möglicherweise nicht vollständig.
Stattdessen wird empfohlen, die CSS-Methode zu verwenden. Hier ist ein Beispiel:
<pre class="brush:php;toolbar:false">$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > offset.top) {
$sidebar.css({
'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'
//added +'px' here to prevent old internet explorer bugs
});
} else {
$sidebar.css({'margin-top':'0px'});
}
});
Vermeiden Sie außerdem die Verwendung mehrerer if else-Anweisungen in Ihren Berechnungen, da dies ebenfalls zu Konflikten führen kann.
Alternativer Ansatz
Für Szenarien, in denen das Ziel darin besteht, ein Navigationselement an einer bestimmten Scrollposition zu fixieren, sollten Sie den folgenden Ansatz in Betracht ziehen:
<pre class="brush:php;toolbar:false">$(document).ready(function() {
$(window).scroll(function() {
var headerH = $('.header').outerHeight(true);
//this will calculate header's full height, with borders, margins, paddings
console.log(headerH);
var scrollVal = $(this).scrollTop();
if ( scrollVal > headerH ) {
//when scroll value reach to your selector
$('#subnav').css({'position':'fixed','top' :'0px'});
} else {
$('#subnav').css({'position':'static','top':'0px'});
}
});
});
Das obige ist der detaillierte Inhalt vonWie kann man die CSS-Wertgrenzen der Fenster-Scrolling-Animation begrenzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!