javascript - scroll滚动问题

问题描述

问 题

1，https://www.kayak.com.hk/holi...主要效果就是这个网站的效果。

当滑动滚动条的时候，右边的div会向下滚动，这时候左边的div也会跟着滚动。但是由于左边的div太长，所以要隐藏最上面的一部分，这个效果实现。
当向上滚动的时候，要隐藏左边div的下面的部分，主要就卡在这边了。试过一个方法， 就是判断前后滚动条的位置来显示，效果可以，但是出现页面卡顿，应该是多次进行前后滚动条的判断导致的。。下面是代码：

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

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

求大神解释。。卡一天了。。。。。随时在线，不理解我可以详细解释。。谢谢大家了

解决方案

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

if($(window).height() > 550){
    var top  = 240,
        timer = 0;                    
    if($(document).scrollTop() > top){
        var beforeScroll=$(document).scrollTop();
        var topIframe = -180;
        $("#SearchPackageLeftDiv").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;
                        $("#SearchPackageLeftDiv").css({"position": "fixed","top":downIframe});
                    }
                    beforeScroll=afterScroll;    
                }, 500)
            }
            
        });
    }else{
        $("#SearchPackageLeftDiv").css({"position": "relative","top": "0px"});
    }
}

这篇关于javascript - scroll滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！