Jump to content

Fixed Floating Menu?


lastlifelost
 Share

Recommended Posts

Here's the page: http://woodturningvt.com/gallery.php. The menu on the right is fixed position, it scrolls with the page. This is fine. What I'd like to have happen is that when you scroll, the menu doesn't move until it's at the top of the screen, eliminating the gap that appears when you scroll now. The most likely culprit code is shown below.

  #menu {	  position:	fixed;	left:		10px;/*	float: 		left;	*/	  width: 		185px;	  padding: 	10px;	  margin: 	90px 10px 0 0;  }  .mainmenu {	  font-family: 	Georgia, "Times New Roman", Times, serif;	  list-style-type: 	none;	  letter-spacing: 	1px;	  margin: 	120px 0 0 25px;	  font-size: 	.75em;	  float:		left;	  width:		165px;  }	<ul class="mainmenu">	<li class="toplevel"><span class="menucaps"><a href="gallery.php">G</span>ALLERY</a> 		<div class="submenu" style="height:1px;"></div>	<!-- left in for spaced border underline -->	</li>		  <li class="toplevel"><span class="menucaps">C</span>USTOM <span class="menucaps">W</span>ORK</li>		  <li class="toplevel"><span class="menucaps">B</span>IO & <span class="menucaps">C</span>ONTACT</li>	</ul>	<!-- END .mainmenu -->

Link to comment
Share on other sites

well here's a script, cannibalized from other two scripts, which together give the required effect, that work in most browsers (well except for IE6, but whats unusual about that! but will give your current fixed menu effect)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var setpositioning="fixed"/*--*//*]]>*/</script> <style type="text/css">body{margin:0;padding:0;}#coord {position:fixed; color:#339966; top:10px; right: 20px;background-color:#CCFFFF; height: 30px; width:50px;}#menuposition{ width: 190px; height:200px; background-color:#33CCFF; margin:0 5px; position:fixed;top: 200px;}#left{ width:200px; float:left; height:1000px; background-color:#CC0000;}#right{ width:200px; float:right; height:1000px; background-color:#660066;}#middle{ margin: 0 210px; padding: 0px 15px; height:1000px; background-color:#669900; border:1px solid #669900;}</style><!--[if lt IE 7]><style type='text/css'>body { height: 100%; overflow: auto ; overflow-x: hidden;}html{overflow-y: hidden;}#coord {position:absolute;}</style><script type="text/javascript"> setpositioning="absolute"</script> <![endif]--></head><body><div id="coord"></div><div id="currentposition"></div><div style="overflow:hidden; background-color:#FFFF33;"><div id="left"> <div id="menuposition"></div></div><div id="right"> </div><div id="middle"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Quos ipsa quae iure distinctio non recusandae consectetur, fuga repellendus nulla dolor rerum provident ad, voluptate rerum minima molestiae cumque quis laborum incidunt recusandae dolorum est. Consectetur ###### nobis quaerat a quia. Sunt tenetur eum fuga animi inventore nemo, esse eum quam, doloremque atque maiores quidem quis ipsa nam officiis, fuga eum consectetur quidem repellat quia?</p><p>Neque corrupti ipsum nihil eum assumenda laborum, iusto tenetur soluta dolorem iure quod eligendi eveniet odio voluptates assumenda saepe, non reiciendis officia quod, assumenda quo voluptate soluta libero? Voluptatum eius iste accusantium libero commodi error hic, voluptates cupiditate fugit eaque iure quo maxime quos? Impedit delectus quo corporis id quisquam eveniet dolore suscipit temporibus tempore qui, quisquam facilis quidem saepe odio, magnam aliquam incidunt numquam quasi ex nisi quia velit vel, adipisci ipsa omnis pariatur deleniti sit, tenetur nam provident laborum vitae non deleniti expedita incidunt hic placeat? Quis hic enim doloremque unde illum accusantium repudiandae.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Quos ipsa quae iure distinctio non recusandae consectetur, fuga repellendus nulla dolor rerum provident ad, voluptate rerum minima molestiae cumque quis laborum incidunt recusandae dolorum est. Consectetur ###### nobis quaerat a quia. Sunt tenetur eum fuga animi inventore nemo, esse eum quam, doloremque atque maiores quidem quis ipsa nam officiis, fuga eum consectetur quidem repellat quia?</p><p>Neque corrupti ipsum nihil eum assumenda laborum, iusto tenetur soluta dolorem iure quod eligendi eveniet odio voluptates assumenda saepe, non reiciendis officia quod, assumenda quo voluptate soluta libero? Voluptatum eius iste accusantium libero commodi error hic, voluptates cupiditate fugit eaque iure quo maxime quos? Impedit delectus quo corporis id quisquam eveniet dolore suscipit temporibus tempore qui, quisquam facilis quidem saepe odio, magnam aliquam incidunt numquam quasi ex nisi quia velit vel, adipisci ipsa omnis pariatur deleniti sit, tenetur nam provident laborum vitae non deleniti expedita incidunt hic placeat? Quis hic enim doloremque unde illum accusantium repudiandae.</p></div></div><script type="text/javascript">/*<![CDATA[*//*---->*/var crossobj=document.all? document.all.currentposition : document.getElementById("currentposition")var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.bodyfunction positionit(){//define universal dsoc top pointvar dsoctop=document.all? iebody.scrollTop : pageYOffsetif (document.all||document.getElementById) { crossobj.style.top=dsoctop+1+"px" }if(parseInt(crossobj.style.top)>200) { crossobj.style.position=setpositioning; document.getElementById("coord").innerHTML=crossobj.style.top; //not required coord display document.getElementById("menuposition").style.position=setpositioning; document.getElementById("menuposition").style.top="10px";}else{document.getElementById("menuposition").style.position="relative";document.getElementById("menuposition").style.top="200px";document.getElementById("coord").innerHTML=crossobj.style.top; //not required coord display}}setInterval("positionit()",50)/*--*//*]]>*/</script> </body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...