Javascript – Problem beim Scrollen

Question

1, https://www.kayak.com.hk/holi... Der Haupteffekt ist der Effekt dieser Website.

Wenn Sie die Bildlaufleiste verschieben, scrollt das p auf der rechten Seite nach unten und das p auf der linken Seite scrollt ebenfalls entsprechend. Da das p auf der linken Seite jedoch zu lang ist, muss der obere Teil ausgeblendet werden, um diesen Effekt zu erzielen.
Wenn Sie nach oben scrollen, müssen Sie den unteren Teil des p auf der linken Seite ausblenden, der hauptsächlich hier hängen bleibt. Ich habe eine Methode ausprobiert, die darin besteht, die Position der vorderen und hinteren Bildlaufleisten zu beurteilen, um sie anzuzeigen. Der Effekt ist in Ordnung, aber wenn die Seite einfriert, sollte dies durch mehrmaliges Beurteilen der vorderen und hinteren Bildlaufleisten verursacht werden. . Hier ist der 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"});
    }
}

Bitte geben Sie mir eine Erklärung. . Ich stecke seit einem Tag fest. . . . . Seien Sie jederzeit online. Wenn Sie es nicht verstehen, kann ich es Ihnen im Detail erklären. . Vielen Dank an alle

Answer 1

页面卡顿可否考虑函数节流？

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

我感觉是不是可以考虑监听window的scroll事件 如果scrollTop达到一定的高度就给左边p一个fixed定位 小于这个高度就取消fixed

Answer 3

尝试用 translate 代替设置 top 并且包在 requestAnimationframe 里，看能不能解决卡顿。

Answer 4

已经解决

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