suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie kann man die CSS-Wertgrenzen der Fenster-Scrolling-Animation begrenzen?

Wie kann man die CSS-Wertgrenzen der Fenster-Scrolling-Animation begrenzen?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-11 20:18:03570Durchsuche

How to Limit CSS Value Limits of Window Scrolling Animation?

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

stellt die Karte dar, wenn sie den unteren Rand eines anderen
mit dynamischer Größe erreicht.

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!

JavaScript jquery css if using map function this position animation issue
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum werden Inline-Blockelemente in ihren Containern nicht vertikal ausgerichtet?Nächster Artikel：Warum werden Inline-Blockelemente in ihren Containern nicht vertikal ausgerichtet?

In Verbindung stehende Artikel

Mehr sehen