Geek Answers Handbook

Google News Left Nav CSS Trick? or jQuery Trick

I am new to this. Browse Google News ... pay attention to the left navigator while scrolling up and down the page.

See how it scrolls a bit, but then sticks to the top of the page before it leaves?

Any ideas on how this is done? Can jQuery and CSS replicate this? If so, any tips?

+2
source share
2 answers

This is also done on YouTube on certain pages, such as the favorites page. I recommend that you use something like the Firefox firebug extension to figure out how they do it. I assume they use a combination of CSS and Javascript. Perhaps something like switching the position to fixed when it is in a certain vertical position.

+1
source

I have a quick implementation of the function you are talking about working in FF and Chrome. But I could not get it to work for IE, which, as I noticed, also does not work on Google News.

 <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>
+1
source

More articles:


All Articles