jhsebree1 Posted January 26, 2006 Share Posted January 26, 2006 Can anyone tell me how to set up my page so that my heading and menu will remain visible even as my user moves down a long web page? Currently, my heading and menu are at the top of the page, and they dissappear as the user scrolls down the page. I'm not a big fan of frames I might mention. Thanks!!!!! Link to comment Share on other sites More sharing options...
~Shinta Posted January 26, 2006 Share Posted January 26, 2006 Use CSS. I forget the property you use though... Link to comment Share on other sites More sharing options...
Eric Posted January 26, 2006 Share Posted January 26, 2006 Well, you could put the whole page inside a scrollable DIV and ask people to use the scrollbar on the DIV instead of the main window scrollbar <body>HEADER STUFF HERE<div style="width: 100%; height: 500px; overflow: auto;">WEBPAGE STUFF HERE</div></body> The result is two scrollbars (as mentioned above). One for the DIV that you want people to use, and one for the window that you do not want people to use.I'm pretty sure you can disable the main window scrollbar with JavaScript but I wouldn't know what the correct script would be Link to comment Share on other sites More sharing options...
scott100 Posted January 26, 2006 Share Posted January 26, 2006 I think this is what you want, credit goes out to dynamicdrive.com <body>hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br />hello<br /><script>if (!document.layers)document.write('<div id="divStayTopLeft" style="position:absolute">')</script><layer id="divStayTopLeft"><!--EDIT BELOW CODE TO YOUR OWN MENU--><table border="1" width="130" cellspacing="0" cellpadding="0"> <tr> <td width="100%" bgcolor="#FFFFCC"> <p align="center"><b><font size="4">Menu</font></b></td> </tr> <tr> <td width="100%" bgcolor="#FFFFFF"> <p align="left"> <a href="http://www.google.com">Google</a><br /> <a href="http://www.yahoo.com">Yahoo</a><br /> <a href="http://www.w3schools.com/">w3schools</a><br /> </tr></table><!--END OF EDIT--></layer><script type="text/javascript">/*Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)Script featured on/available at http://www.dynamicdrive.com/This notice must stay intact for use*///Enter "frombottom" or "fromtop"var verticalpos="frombottom"if (!document.layers)document.write('</div>')function JSFX_FloatTopDiv(){ var startX = 3, startY = 450; var ns = (navigator.appName.indexOf("Netscape") != -1); var d = document; function ml(id) { var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x;this.style.top=y;}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function() { if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : document.body.scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("divStayTopLeft"); stayTopLeft();}JSFX_FloatTopDiv();</script></body> Link to comment Share on other sites More sharing options...
Jonas Posted January 26, 2006 Share Posted January 26, 2006 Well, you could put the whole page inside a scrollable DIV and ask people to use the scrollbar on the DIV instead of the main window scrollbar<body>HEADER STUFF HERE<div style="width: 100%; height: 500px; overflow: auto;">WEBPAGE STUFF HERE</div></body> The result is two scrollbars (as mentioned above). One for the DIV that you want people to use, and one for the window that you do not want people to use.I'm pretty sure you can disable the main window scrollbar with JavaScript but I wouldn't know what the correct script would be <{POST_SNAPBACK}> <html><head><style type="text/css">html,body {overflow: hidden;}div#content {width: screen width;height: screen height - menu height;overflow: scroll;}</style></head><body><div id="menu">Navigation bar</div><div id="content">Content here</div></body></html>html,body {overflow: hidden;} should remove the standard scrollbar... Link to comment Share on other sites More sharing options...
Eric Posted January 27, 2006 Share Posted January 27, 2006 I didn't even think of usinghtml,body {overflow: hidden;}Thanks for reminding me about that Link to comment Share on other sites More sharing options...
Guest johnnyclock Posted January 27, 2006 Share Posted January 27, 2006 Can anyone tell me how to set up my page so that my heading and menu will remain visible even as my user moves down a long web page? Currently, my heading and menu are at the top of the page, and they dissappear as the user scrolls down the page. I'm not a big fan of frames I might mention. Thanks!!!!!<{POST_SNAPBACK}> I think all you need to do is to use "position: fixed" and then place them where you want them. The page will scroll behind them. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now