Hello, I'm new at this. Check out Google News... notice the left nav when scrolling up and down the page.
See how is scrolls for a little bit but then sticks to the top of the page before it goes away?
Any ideas on how that is done? Can jQuery and CSS replicate that? If so, any tips?
This is also done on YouTube in certain pages such as the favorites page. I recommend you use something like Firefox's firebug extension to figure out how they're doing it. I imagine they are using a combination of CSS and Javascript. Perhaps something like, toggling the position to fixed when at a certain vertical position.
I have a quick implementation of the feature you are talking about working in FF and Chrome. But could not make it work for IE, which I noticed doesn't work in google news too
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fixLeftNav()
{
if(document.body.scrollTop > document.getElementById('header').offsetHeight)
{
document.getElementById('leftNav').style.position = 'fixed';
document.getElementById('leftNav').style.top = 0;
}
else
document.getElementById('leftNav').style.position = 'static';
}
//-->
</SCRIPT>
</HEAD>
<BODY id='a' onscroll="fixLeftNav()">
<div id='header' style="width:800px; border: solid 1px green; height: 100px">
header
</div>
<div id='leftNav' style="float: left; width: 200px; border: solid 1px green; height: 500px;">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div style="width:600px; border: solid 1px green; height: 1000px; margin-left: 200px">
The moderators’ questions were frequently ignored. The candidates barely looked at one another. One wore black gloves and spoke of himself repeatedly in the third person. And Andrew M. Cuomo, the Democratic candidate and the race’s front-runner, at times struggled to suppress laughter...
</div>
</BODY>
</HTML>