Heim  >  Fragen und Antworten  >  Hauptteil

Javascript – Problem beim Scrollen

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

过去多啦不再A梦过去多啦不再A梦2694 Tage vor923

Antworte allen(4)Ich werde antworten

  • 高洛峰

    高洛峰2017-06-26 10:57:45

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

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

    Antwort
    0
  • PHP中文网

    PHP中文网2017-06-26 10:57:45

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

    Antwort
    0
  • 習慣沉默

    習慣沉默2017-06-26 10:57:45

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

    Antwort
    0
  • 伊谢尔伦

    伊谢尔伦2017-06-26 10:57:45

    已经解决

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

    Antwort
    0
  • StornierenAntwort