国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - scroll滾動問題
過去多啦不再A夢
過去多啦不再A夢 2017-06-26 10:55:45
0
4
1029

1,https://www.kayak.com.hk/holi...主要效果就是這個網(wǎng)站的效果。

當滑動滾動條的時候,右邊的p會向下滾動,這時候左邊的p也會跟著滾動。但是由于左邊的p太長,所以要隱藏最上面的一部分,這個效果實現(xiàn)。
當向上滾動的時候,要隱藏左邊p的下面的部分,主要就卡在這邊了。試過一個方法, 就是判斷前后滾動條的位置來顯示,效果可以,但是出現(xiàn)頁面卡頓,應(yīng)該是多次進行前后滾動條的判斷導(dǎo)致的。。下面是代碼:

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

求大神解釋。??ㄒ惶炝?。。。。。隨時在線,不理解我可以詳細解釋。。謝謝大家了

過去多啦不再A夢
過去多啦不再A夢

全部回復(fù)(4)
小葫蘆

頁面卡頓可否考慮函數(shù)節(jié)流?

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

我感覺是不是可以考慮監(jiān)聽window的scroll事件 如果scrollTop達到一定的高度就給左邊p一個fixed定位 小于這個高度就取消fixed

習慣沉默

嘗試用 translate 代替設(shè)置 top 并且包在 requestAnimationframe 里,看能不能解決卡頓。

伊謝爾倫

已經(jīng)解決

        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"});
            }                
        }
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板