I'm got a site that has a long list of tweets, and as you scroll down the right column follows you down, showing stats on the tweets. (See it in action at http://www.grapevinegame.com . Click 'memorise', then 'skip' to get to the list page. Works in Safari and Chrome).
I'm using jQuery to update the top-margin of the right column, increasing it as I scroll down. It seems to be working fine in webkit-based browsers, but doesn't budge in Firefox. Heres the code, the right column element is a div with id = "distance".
// 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);
}
});
});
Appreciate any help or advice!
