【发布时间】:2010-04-17 01:02:02
【问题描述】:
我的网站有很长的推文列表,当您向下滚动时,右栏会跟随您向下滚动,显示推文上的统计信息。 (在http://www.grapevinegame.com 上查看它的实际操作。单击“记忆”,然后单击“跳过”以进入列表页面。适用于 Safari 和 Chrome)。
我正在使用 jQuery 来更新右列的上边距,并在我向下滚动时增加它。它似乎在基于 webkit 的浏览器中运行良好,但在 Firefox 中并没有让步。下面是代码,右列元素是一个 id =“距离”的 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);
}
});
});
感谢任何帮助或建议!
【问题讨论】:
标签: jquery firefox safari google-chrome scroll