ОК, у меня есть сайт, который я разрабатываю для клиента. Этот веб-сайт довольно прост, но клиент определил одну вещь: когда пользователь прокручивает страницу вниз, он хочет, чтобы меню прокручивалось вниз вместе с ним. Я думал, что было бы хорошо просто использовать .menu { position: fixed;}, но это не удалось, потому что меню должно быть длиннее, чем размер экрана компьютеров пользователя.
Итак, я сейчас использую код JavaScript, который позволяет элементу div оставаться как position:absolute, но когда верхняя часть элемента div достигает верхней части страницы во время прокрутки, он меняет его на position:fixed. ОК, это здорово.
Но этот сценарий, похоже, работает в Internet Explorer 6, 7, (9 не уверен), но не в Internet Explorer 8. Все браузеры WebKit работают. Почему?
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";
}
Пример страницы:
<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>
Пример 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;
}
Мой второй вопрос применим, если нет способа решить первый. Чтобы обойти это, я использовал условный CSS для применения определенных настроек к определенным браузерам:
Например:
In Internet Explorer 8
div > div#menu{ position:absolute; }
div > div.smOW { position: absolute; }
Которая блокирует скрипт и сохраняет его абсолютным.
Проблема в том, что это работает для Internet Explorer 7 и ниже и WebKit:
Если я применяю настройку в CSS, которая позволяет браузерам WebKit работать, Internet Explorer 7 не работает, и наоборот. Раздражает я знаю.
Я могу применить условный CSS к Internet Explorer 7, но я не могу использовать WebKit, потому что мне нужны оба, чтобы он работал.
Это условные выражения, которые я пытаюсь использовать:
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; }
Если я добавлю последний бит кода CSS в основной файл, условные настройки CSS в Internet Explorer 7 будут переопределены, и он не будет работать.
Я пытался использовать browscap в зависимости от браузера, но это тоже не сработало.