So... I've had a quick stab at doing like Aaron suggested, and managed to get a 'working' thingy, but it's still a bit buggy.
Overall, I'm not happy with it.
I can get the userbox to move along with the window scroll, but it gets very complicated when I reach the end of the post, because it tends to increase the userbox size regardless, and thus increase the size of the post, and make it impossible to reach the next message, etc...
So, I added a few failsafes to ensure the userbox size never increases beyond the original height, but even then...
It becomes *jerky*. A bit jerky when I'm scrolling with the keyboard or mouse wheel (like, 1 out of 10 times, you can see the avatar scroll up, then suddenly be restored), and a LOT jerky with the mouse, especially when scrolling through with the mouse, i.e. smoothly: probably because there are too many event triggers, it not only shows the jump effect too much, but it also fails to correctly *scroll the screen* (even though I don't manipulate this!) when transitioning between posts.
Additionally, I think that this animation, while fun at the beginning, will probably get tiresome quickly enough, unless it's replaced with just the user name instead of the entire user box, I don't know, but in this case, it means I'll have to do a position:fixed item... Hmm, well at least it'll solve the jerkiness issue, I guess..?!
If you want to test, I'll paste the code for you. I'd really, REALLY appreciate any feedback.
Open scripts/topic.js
On line 45, add this (or just add it anywhere inside the $(window).load() event):
var poster_padding = parseInt($('.poster').first().css('padding-top'));
if (!isNaN(poster_padding))
{
$(window).scroll(function ()
{
var top = $(window).scrollTop(), $poster = null, poster_top, ex_poster_top, last = true;
$('.poster').each(function ()
{
if ($poster === null)
{
$poster = $(this);
poster_top = $poster.offset().top;
return;
}
ex_poster_top = poster_top;
poster_top = $(this).offset().top;
if (poster_top >= top)
return last = false;
$poster = $(this);
});
if (last)
{
var swap = ex_poster_top;
ex_poster_top = poster_top;
poster_top = swap + $poster.height();
}
$poster.css('padding-top', Math.min(Math.max(0, top - ex_poster_top) + poster_padding, poster_top - ex_poster_top - $poster.find('.column').height()));
$('.poster').not($post).css('padding-top', poster_padding);
});
}
I can probably upload it here too, but I'm wary of alienating users, ah ah...
:edit: Also, in Msg.template.php, find <div class="poster"> and immediately add <div class="column"> after it... Then find the </div> that matches it, and replace with two </div>.