javascript - isu skrol skrol

Question

1, https://www.kayak.com.hk/holi... Kesan utama adalah kesan laman web ini.

Apabila meluncur bar skrol, p di sebelah kanan akan menatal ke bawah, dan p di sebelah kiri juga akan menatal dengan sewajarnya. Tetapi oleh kerana p di sebelah kiri terlalu panjang, bahagian atas perlu disembunyikan, dan kesan ini dicapai.
Apabila menatal ke atas, anda perlu menyembunyikan bahagian bawah p di sebelah kiri, yang kebanyakannya tersekat di sini. Saya telah mencuba kaedah, iaitu menilai kedudukan bar skrol depan dan belakang untuk memaparkannya Kesannya OK, tetapi jika halaman itu membeku, ia sepatutnya disebabkan oleh menilai bar skrol depan dan belakang beberapa kali. . Ini kodnya:

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

Sila beri saya penjelasan. . Dah stuck sehari. . . . . Berada dalam talian pada bila-bila masa, jika anda tidak faham saya boleh menerangkannya secara terperinci. . Terima kasih semua

Answer 1

Jika halaman tersekat, bolehkah kita menganggap pendikit fungsi?

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

Saya rasa anda boleh mempertimbangkan untuk memantau acara skrol tetingkap Jika skrolTop mencapai ketinggian tertentu, berikan p kiri kedudukan tetap Jika kurang daripada ketinggian ini, batalkan kedudukan tetap

Answer 3

Cuba gunakan terjemah dan bukannya set atas dan bungkusnya dalam requestAnimationframe untuk melihat sama ada ia boleh menyelesaikan ketinggalan.

Answer 4

Sudah diselesaikan

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