我有一个网站,其中包含很长的推文列表,当您向下滚动时,右侧列会跟随您,显示推文上的统计信息。 (请参阅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);
}
});
});
感谢任何帮助或建议!
答案 0 :(得分:1)
<强>已更新!强>
似乎$("body").scrollTop()
总是返回0,我认为这是问题所在。
但是当我尝试$(“html”)。scrollTop()时,它似乎正在返回正确的scrollTop。
尝试将scrollPosition行更改为:
scrollPosition = $("html").scrollTop(),