Question

我有一个大而简单的脚本问题。点击按钮时，我需要突出显示一些div的背景。一切正常，直到我添加滚动功能添加其他着色规则。

滚动时我有以下javascript代码：

$(document).ready(function(){
    $(window).scroll(function()
    {   
        var $top1 = $('.container_img_banchi_idraulici').offset().top + 330;
        var $top_bpf = $('#BPF-T3000').offset().top -100;



             if (($(window).scrollTop()>$top_bpf) && $('.hidden_combinati').css("display") == "block")   
            {
             color_bpf_t3000();
            }

             if (($(window).scrollTop()<$top_bpf) && $('.hidden_combinati').css("display") == "block")    
            {

             no_color_bpf();
            }

和其他功能代码：

COLOR_BPF：

function color_bpf_t3000(){         

            for (i = 0; i<BPF_T3000.length; i++){               
                $('#'+BPF_T3000[i]+'.rettangolo_test').animate({ backgroundColor: color_green });
                $('#'+BPF_T3000[i]+' + a').css('font-weight', 'bold');          
            }
            for (i = 0; i<BPF_T3000_optional.length; i++){              
                $('#'+BPF_T3000_optional[i]+'.rettangolo_test').animate({ backgroundColor: color_yellow });
                $('#'+BPF_T3000_optional[i]+' + a').css('font-weight', 'bold');         
            }

        }

NO_COLOR

function decolora_bpf(){
            reset_colors();                 
            for (i = 0; i<combinati.length; i++){               
                $('#'+combinati[i]+'.rettangolo_test').animate({ backgroundColor: color_green });
                $('#'+combinati[i]+' + a').css('font-weight', 'bold');          
            }
        }

RESET_COLOR

function resetta_colori(){
            $('.rettangolo_test').css('background-color', color_white);
            $('.rettangolo_test + a').css('font-weight', 'normal');
        }

即使.hidden_combinati没有显示，也会执行no_color_bpf。

但如果我写代码

             if (($(window).scrollTop()<$top_bpf) && $('.hidden_combinati').css("display") == "block")    
            {
            alert("hello"); 
             no_color_bpf();
            }

一切正常。

似乎在显示无效之前执行该功能。我试图用.delay（）和其他方法延迟函数，但无法解决。

有什么建议吗？

谢谢！

编辑1 var scrolltop = $（window）.scrollTop（）;

console.log("scrolltop "+scrolltop); 
            console.log("top_Btp "+top_bpf); 
            console.log("display " +$('.hidden_combinati').css("display"));
            console.log("if " + scrolltop<top_bpf && $('.hidden_combinati').is(':visible'));
            console.log("if2 " +scrolltop < top_bpf);
            console.log("if2 " +scrolltop > top_bpf);

输出如下：

top_Btp 911 
display block 
false 
false 
false 
scrolltop 506 
top_Btp 911 
display block 
false 
false 
false 
scrolltop 507 
top_Btp 911 
display block 
false 
false 
false

即使当scrollTop超过Top_bpt时也是如此。

我做错了什么？

Answer 1

我觉得使用console.log（）调试我的代码非常有用，可以检查出错的地方。我会跑一个

console.log($(window).scrollTop()); console.log($top_bpf); console.log($('.hidden_combinati').css("display"));

首先，确保条件成立的原因。

console.log（）输出到javascript控制台，可在Chrome中的“inspect element”和firefox的“firebug”找到。

Jquery滚动无法正确执行

1 个答案: