Maison  >  Article  >  interface Web  >  Comment limiter la plage d'animation de défilement avec CSS ?

Comment limiter la plage d'animation de défilement avec CSS ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-12 10:11:01599parcourir

How to Limit Scroll Animation Range with CSS?

Définir des limites sur la valeur CSS pour l'animation de défilement de fenêtre

Énoncé du problème

Lors de la mise en œuvre d'un effet de défilement dynamique, tel en tant que carte qui se déplace en synchronisation avec le défilement de l'utilisateur, il peut être souhaitable de limiter la plage de défilement pour empêcher l'utilisateur d'atteindre le bas de la page sans fin.

Approche de solution avec CSS

L'utilisation de la méthode animate() avec des événements de défilement peut conduire à des conflits et à des boucles d'animation infinies. Au lieu de cela, envisagez d'utiliser la méthode CSS pour définir margin-top :

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if (scrollVal > offset.top) {
        $sidebar.css({'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'});
    } else {
        $sidebar.css({'margin-top': '0px'});
    }
});

Approche alternative pour le positionnement des éléments

Dans les cas où le positionnement des éléments à l'aide de margin-top peut ne pas être réalisable, une approche alternative peut être utilisée. Considérons un scénario où le comportement souhaité est de réparer un élément lorsque le défilement atteint un certain point :

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
       var scrollVal = $(this).scrollTop();
        if (scrollVal > headerH) {
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });​

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn