javascript - problème de défilement

Question

1, https://www.kayak.com.hk/holi... L'effet principal est l'effet de ce site Web.

Lorsque vous faites glisser la barre de défilement, le p à droite défilera vers le bas et le p à gauche défilera également en conséquence. Mais comme le p à gauche est trop long, la partie supérieure doit être masquée et cet effet est obtenu.
Lors du défilement vers le haut, vous devez masquer la partie inférieure du p à gauche, qui est principalement coincée ici. J'ai essayé une méthode qui consiste à juger la position des barres de défilement avant et arrière pour l'afficher. L'effet est correct, mais si la page se fige, cela doit être provoqué en jugeant plusieurs fois les barres de défilement avant et arrière. . Voici le code :

if($(window).height() > 550){

var top  = 240;                    
if($(document).scrollTop() > top){
    var beforeScroll=$(document).scrollTop();
    var topIframe = -180;
    $("#SearchPackageLeftp").css({"position": "fixed","top": topIframe});
    $(window).scroll(function(){
        var afterScroll=$(document).scrollTop();
        var result=afterScroll-beforeScroll;
            if(result<0){
            var downIframe=10;
            $("#SearchPackageLeftp").css({"position": "fixed","top":downIframe});
        }
            beforeScroll=afterScroll;
    });
}else{
    $("#SearchPackageLeftp").css({"position": "relative","top": "0px"});
    }
}

Veuillez me donner une explication. . Je suis coincé depuis un jour. . . . . Soyez en ligne à tout moment, si vous ne comprenez pas, je peux vous l'expliquer en détail. . Merci à tous

Answer 1

Si la page est bloquée, pouvons-nous envisager une limitation des fonctions ?

if($(window).height() > 550){
    var top  = 240,
        timer = 0;                    
    if($(document).scrollTop() > top){
        var beforeScroll=$(document).scrollTop();
        var topIframe = -180;
        $("#SearchPackageLeftp").css({"position": "fixed","top": topIframe});
        $(window).scroll(function(){
            if (timer === 0) {
                timer = setTimeout(function() {
                    timer = 0;
                    var afterScroll=$(document).scrollTop();
                    var result=afterScroll-beforeScroll;
                    if(result<0){
                        var downIframe=10;
                        $("#SearchPackageLeftp").css({"position": "fixed","top":downIframe});
                    }
                    beforeScroll=afterScroll;    
                }, 500)
            }
            
        });
    }else{
        $("#SearchPackageLeftp").css({"position": "relative","top": "0px"});
    }
}

Answer 2

J'ai l'impression que vous pouvez envisager de surveiller l'événement de défilement de la fenêtre. Si le scrollTop atteint une certaine hauteur, donnez au p gauche une position fixe. S'il est inférieur à cette hauteur, annulez la position fixe

.

Answer 3

Essayez d'utiliser Translate au lieu de définir top et enveloppez-le dans requestAnimationframe pour voir si cela peut résoudre le décalage.

Answer 4

Déjà résolu

        function scrollHeight(topIframe){
            var top  = 240;    
            var timer=0;
            if($(document).scrollTop() > top){
                var beforeScroll=$(document).scrollTop();
                $("#SearchPackageLeftp").css({"position": "fixed","bottom": topIframe});
                $("#SearchPackageLeftp").css("top","");
                $(window).scroll(function(){
                    if(timer===0){
                        timer=setTimeout(function() {
                        timer=0;
                        var afterScroll=$(document).scrollTop();
                           var result=afterScroll-beforeScroll;
                        if(result<0){
                            $("#SearchPackageLeftp").addClass("scrollstyle");
                            if($(document).scrollTop()<top){
                                var downIframe=0;
                                $("#SearchPackageLeftp").css({"position": "relative","bottom":downIframe});
                            }
                        }else{
                            $("#SearchPackageLeftp").removeClass("scrollstyle");
                        }
                           beforeScroll=afterScroll;
                        },0)
                    }
                });    
            }else{
                $("#SearchPackageLeftp").css({"position": "relative","bottom": "0px"});
            }                
        }