Всем здравствуйте!
Подскажите как бороться с такой ерундой: нужно чтобы при скроллинге страницы состоящей из div и 4 section находящихся во втором div верхнее меню из первого div исчезало при прокрутке на 4-ую section. Нашел скрипт, в отдельном тестовом документе работает, но не знаю как в скрипте задать высоту стр. в единицах wh. И еще само меню сразу исчезает при скролле, блок остается и исчезает в нужном месте, но меню (его текст) заменяется бегающими при скроллинге цифрами.
Что это за цифры и как их убрать?
Вот код:
<!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=utf-8" />
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var bo = $(this).scrollTop();
var a = $("#menugl").css('opacity')
$("#menugl").html(bo);
if ( bo >= 1700 && a == 1) {$("#menugl").css("opacity", "0",500)};
if ( bo <= 1700 && a == 0) {$("#menugl").css("opacity", "1",500)};
})
})
</script>
</head>
<body>
<div class="glav">
<section id="c">
<ul id="menugl">
<li class=""> <a href="">11111</a> </li>
<li class=""> <a href="">22222</a> </li>
<li class=""> <a href="">33333</a> </li>
</ul>
</div>
<section class="odin">
</div>
<section class="dva">
</div>
</div>
</body>
</html>
стили
html, body, section, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0; border:0;outline:0; font-size:100%;vertical-align:baseline; background:transparent; }a{text-decoration:none;} .div{word-break:break-all;}#div{word-break:break-all;}
ul, li {list-style-type: none; margin:0;padding:0; border:0;outline:0;}
body
{
height:3000px;
}
.glav
{
height:300vh;
}
#menu
{
width:100vw;
height:100vh;
background:#3FF;
}
#menugl
{
position:fixed;
width:20vw;
height:20vh;
padding:5vh;
background:#66C;
opacity:1;
}
#menugl a:hover
{
color:#0C3;
}
.odin
{
width:100vw;
height:100vh;
}
.dva
{
width:100vw;
height:100vh;
background:#CF6;
}