javascript - problème de défilement
过去多啦不再A梦
过去多啦不再A梦 2017-06-26 10:55:45
0
4
955

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

过去多啦不再A梦
过去多啦不再A梦

répondre à tous(4)
小葫芦

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"});
    }
}
Ty80

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

.
習慣沉默

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.

伊谢尔伦

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"});
            }                
        }
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal