Comment limiter la plage d'animation de défilement avec 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!