Home  >  Q&A  >  body text

javascript - scroll scrolling issue

1, https://www.kayak.com.hk/holi... The main effect is the effect of this website.

When sliding the scroll bar, the p on the right will scroll down, and the p on the left will also scroll accordingly. But since the p on the left is too long, the top part needs to be hidden, and this effect is achieved.
When scrolling up, you need to hide the lower part of the p on the left, which is mainly stuck here. I have tried a method, which is to judge the position of the front and rear scroll bars for display. The effect is OK, but the page is stuck, which should be caused by judging the front and rear scroll bars multiple times. . Here is the 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"});
    }
}

Please explain. . Been stuck for a day. . . . . Be online at any time, if you don’t understand I can explain it in detail. . Thank you everyone

过去多啦不再A梦过去多啦不再A梦2694 days ago925

reply all(4)I'll reply

  • 高洛峰

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

    If the page is stuck, can we consider function throttling?

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

    reply
    0
  • PHP中文网

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

    I feel like you can consider monitoring the scroll event of the window. If the scrollTop reaches a certain height, give the left p a fixed position. If it is less than this height, cancel the fixed position

    reply
    0
  • 習慣沉默

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

    Try to use translate instead of setting top and wrap it in requestAnimationframe to see if it can solve the problem.

    reply
    0
  • 伊谢尔伦

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

    Already solved

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

    reply
    0
  • Cancelreply