OK, I have a website which I am developing for a client. This website is fairly basic, but one thing the client has identified is that when the user is scrolling down the page they want the menu to scroll down with them. I thought it was fine just to use .menu { position: fixed;}, but that failed because the menu want to be longer than the screen size of the user’s computers.
So I am now using JavaScript code which allows the div to stay as position:absolute, but when the top of the div reaches the top of the page whilst scrolling, it changes it to position:fixed. OK, that’s great.
But that script on;y seems to work in Internet Explorer 6, 7, (9 not sure), but not in Internet Explorer 8. All WebKit browsers work. Why?
Script (scrolling)
function reposition(){
var el = document.getElementById('menu');
var ScrollTop = document.body.scrollTop;
if (ScrollTop == 0)
{
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
if(ScrollTop < 200)
el.style.top = 200 - ScrollTop + "px";
else
el.style.top = "0px";
}
Example page:
<body onscroll="reposition()">
<script type="text/javascript">
disableSelection(document.body)
</script>
<div id="header-cont" class="border-radius-bottom">
<div id="header">
<div id="logo"><div id="Page-Title">
<h1 style="font-size:30px;">Bowlplex YBC</h1></div></div>
</div>
</div>
<div id="container">
<div id="wrapper">
<div id="menu">
<ul id="nav">
<li><a href="/" title="Home">Home</a></li><br />
<li><a href="/" title="Constitution">Constitution</a></li>
<li><a href="/" title="Rules">Rules</a>
<ul>
<li><a href="/" title="BTBA">BTBA Rules</a></li>
<li><a href="/" title="Club">Club Rules</a></li>
<li><a href="/" title="Basics">Basic Bowling Rules</a></li>
</ul>
</li>
<li><a href="/" title="Tournaments">Tournaments</a>
<ul>
<li><a href="/" title="List">List</a></li>
<li><a href="/" title="Reports">Reports</a></li>
</ul>
</li>
<li><a href="/Calendar" title="Calendar">Our Calendar</a>
<ul>
<li><a href="/Calendar/?option=YBC" title="YBC">YBC Calendar</a></li>
<li><a href="/Calendar/?option=Tourament" title="Tournament">Tournament Calendar</a></li>
</ul>
</li>
<li><a href="/" title="Achievements">Achievements</a></li>
<li><a href="/" title="Newsletters">Newsletters</a></li>
<li><a href="/" title="Sponsorship">Sponsorship</a></li>
<li><a href="/" title="Contacts">Contacts</a></li>
<br />
<li><a href="/" title="Policies">Policies</a>
<ul>
<li><a href="/" title="YBC">YBC Policies</a></li>
<li><a href="/" title="Website">Website Policies</a></li>
</ul>
</li>
<li><a href="/Forum" title="Forum">Forum</a></li>
<br>
<li><a href="/admin/" title="Admin">Admin Login</a></li></ul>
</div>
<p> </p>
</div>
</div>
</div>
</body>
Example CSS
@charset "utf-8";
/* CSS Document */
body{
margin: auto;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: 400;
font-size:12px;
background: #dddddd;
}
a img {
border:none;
color:inherit;
text-decoration:none;
}
#container{
width: 900px;
margin: auto;
margin-top: 5px;
margin-bottom:20px;
}
#header-cont {
width:auto;
margin:auto;
height:115px;
padding-top:30px;
padding-bottom:10px;
background:url(../images/header_bg.png) repeat-x top left;
z-index:-1;
border-bottom: 2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
}
#header{
margin:auto;
width:900px;
height: 90px;
z-index:8;
}
#menu {
position:absolute;
margin-left:-253px;
margin-top:5px;
}
div > div#menu { position: fixed; }
#logo{
float:left;
width:200px;
height:90px;
background:url(../images/bowlplex_logo.png) no-repeat left top;
position:absolute;
}
#Page-Title{
padding-left:10px;
width:690px;
margin-left:210px;
position:relative;
}
#wrapper{
margin-top:40px;
padding:8px 26px 16px 26px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:#333 0px 0px 15px;
-moz-box-shadow:#333 0px 0px 15px;
text-align: left;
color: #555;
background-color:#FFFFFF;
}
.content{
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background-color:#FFFFFF;
margin:5px;
padding:10px;
float:left;
height:200px;
width:500px;
}
.border-radius{
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
My second question applies if there is no way to solve the first. As a work around to this I have used conditional CSS in order to apply certain settings to certain browsers:
For example:
In Internet Explorer 8
div > div#menu{ position:absolute; }
div > div.smOW { position: absolute; }
Which blocks the script and keeps it absolute.
The problem is this works for Internet Explorer 7 and below and WebKit:
If I apply the setting in CSS that allows WebKit browsers to work Internet Explorer 7 doesn’t work and vice versa. Annoying I know.
I can apply a conditional CSS to Internet Explorer 7, but I can’t for the WebKit because I need both to make it work.
These are the conditional statements I am trying to use:
This one is for Internet Explorer 7
<!--[if gte IE 5.5]><![if lt IE 7]>
<link rel="stylesheet" href="../styles/ie.css" type="text/css" />
<![endif]><![endif]-->
In order for the scrolling sub menus to work it needs this:
div > div.smOW { position: absolute !important; }
This one is for Internet Explorer 8
<!--[if IE 8]>
<link rel="stylesheet" href="../styles/ie8.css" type="text/css" />
<![endif]-->
This one disable the scrolling effect (at the moment)
div > div#menu{
position:absolute;
}
div > div.smOW { position: absolute; }
And finally this one is the one I use for WebKit browsers **Which doesn't work**
<!--[if !IE]>
<link rel="stylesheet" href="../styles/MenuMatic-not-ie.css" type="text/css" />
<![endif]-->
div > div.smOW { position: fixed; }
If I put the final bit of CSS code into the main file Internet Explorer 7’s conditional CSS settings are overridden, and it doesn’t work.
I’ve tried browscap to apply it depending on the browser, but that doesn’t seem to work either.
I just tried your code and it works with just these settings:
Tried to make a fiddle of this, it’s not perfect, but check it here.
Anyway, if you use a JavaScript framework like jQuery or MooTools, these things really get easier… For example, check Creating a floating HTML menu using jQuery and CSS, I’ve used it once and is pretty simple and cross-browser; adapting it would be no problem.