jQuery代码在Safari和Chrome中运行,但不适用于Firefox

时间:2010-04-17 01:02:03

标签: jquery firefox safari google-chrome scroll

我有一个网站,其中包含很长的推文列表,当您向下滚动时,右侧列会跟随您,显示推文上的统计信息。 (请参阅http://www.grapevinegame.com中的操作。点击“记住”,然后“跳过”进入列表页面。在Safari和Chrome中运行。

我正在使用jQuery来更新右列的上边距,在我向下滚动时增加它。它似乎在基于webkit的浏览器中运行良好,但在Firefox中并没有让步。继承代码,右列元素是id =“distance”的div。

// Listen for scroll function
            $(window).scroll(function () {

                    // Calculating the position of the scrollbar
                    var doc = $("body"), 
                    scrollPosition = $("body").scrollTop(),
                    pageSize = $("body").height(),
                    windowSize = $(window).height(),
                    fullScroll = (pageSize) - windowSize;
                    percentageScrolled = (scrollPosition / fullScroll);

                    var entries = $("#whispers-list > li").length;

                    // Set position of distance counter
                    $('div#distance').css('margin-top', ($("#whispers-list").height()+$("#latest-whisper").height()+33)*percentageScrolled);

                    // Update distance counter
                        $('#distance-travelled').text(Math.round(distanceTravelled*(1-percentageScrolled)));            
                        $('#whispers-list li').each(function(index) {

                                //highlight adjacent whispers                               
                                if ($('#whispers-list li:nth-child('+(index+1)+')').offset().top >= $('#distance').offset().top && $('#whispers-list li:nth-child('+(index+1)+')').offset().top <= $('#distance').offset().top + $('#distance').height()) {
                                    // alert("yup");
                                    $('#whispers-list li:nth-child('+(index+1)+') ul').fadeTo(1, 1);
                                } else {
                                    $('#whispers-list li:nth-child('+(index+1)+') ul').fadeTo(1, 0.5);  
                                }
                              });               

                    });

感谢任何帮助或建议!

1 个答案:

答案 0 :(得分:1)

<强>已更新!

似乎$("body").scrollTop()总是返回0,我认为这是问题所在。

但是当我尝试$(“html”)。scrollTop()时,它似乎正在返回正确的scrollTop。

尝试将scrollPosition行更改为:

scrollPosition = $("html").scrollTop(),