Всем добрый вечер)
Попробывал реализовать навигацию по одностраничному сайту, делал все в фф и как следствие там все хорошо. После того как протестировал других браузерах, понял что все не очень хорошо. Где-то не реагирует на нажатие по ссылке, где-то все скочет...
Ссылка на страничку -
http://boooms.ru/test_js/
var navigation = new Array();
navigation.clientHeight = 0.92 * document.documentElement.clientHeight;
navigation.thisPage = window.location.hash.substring(1);
navigation.tonamePage = false;
navigation.scrollPosition = '0';
function select(id) {
switch(id) {
case 'cover':
navigation.scrollPosition = '0';
navigation.namePage = ''; break;
case 'about':
navigation.scrollPosition = navigation.clientHeight;
navigation.namePage = 'About Us'; break;
case 'freedom':
navigation.scrollPosition = 2 * navigation.clientHeight;
navigation.namePage = 'Freedom for Ideas'; break;
case 'thinking':
navigation.scrollPosition = 3 * navigation.clientHeight;
navigation.namePage = 'Thinking'; break;
case 'projects':
navigation.scrollPosition = 4 * navigation.clientHeight;
navigation.namePage = 'Projects'; break;
default:
navigation.scrollPosition = '0';
navigation.namePage = ''; break;
}
navigation.colorElement = 'rgb(0,0,0)';
}
function set() {
window.location.hash = navigation.thisPage;
document.title = 'o_O // ' + navigation.namePage;
document.getElementById(navigation.tonamePage).style.backgroundColor = 'rgb(255,255,255)';
document.getElementById(navigation.thisPage).style.backgroundColor = navigation.colorElement;
}
function scrollPage() {
if (navigator.appName == "Microsoft Internet Explorer") {
navigation.scrollPosition = document.documentElement.scrollTop;
} else {
navigation.scrollPosition = window.pageYOffset;
}
if (navigation.tonamePage == false) {
if (navigation.thisPage == false) {
navigation.thisPage = 'cover';
}
select(navigation.thisPage);
document.getElementById(navigation.thisPage).style.backgroundColor = navigation.colorElement;
document.documentElement.scrollTop = navigation.scrollPosition;
} else {
/* Определяем текущее положение */
if (navigation.scrollPosition >= 0 && navigation.scrollPosition <= 0.5 * navigation.clientHeight) {
navigation.thisPage = 'cover';
}
if (navigation.scrollPosition > 0.5 * navigation.clientHeight && navigation.scrollPosition <= 1.5 * navigation.clientHeight) {
navigation.thisPage = 'about';
}
if (navigation.scrollPosition > 1.5 * navigation.clientHeight && navigation.scrollPosition <= 2.5 * navigation.clientHeight) {
navigation.thisPage = 'freedom';
}
if (navigation.scrollPosition > 2.5 * navigation.clientHeight && navigation.scrollPosition <= 3.5 * navigation.clientHeight) {
navigation.thisPage = 'thinking';
}
if (navigation.scrollPosition > 3.5 * navigation.clientHeight) {
navigation.thisPage = 'projects';
}
if (navigation.thisPage != navigation.tonamePage) {
select(navigation.thisPage);
set();
}
}
navigation.tonamePage = navigation.thisPage;
}
function clickMenu(element) {
select(element);
if (navigator.appName == "Microsoft Internet Explorer") {
window.pageYOffset = navigation.scrollPosition;
} else {
document.documentElement.scrollTop = navigation.scrollPosition;
}
}
<!doctype html>
<html lang="ru-RU">
<head>
<meta charset="utf-8" />
<title>Test JS</title>
<link rel="stylesheet" href="css/style.css" />
<script src='js/navigation.js'></script>
</head>
<body onload="setInterval('scrollPage();', 100)">
<header>
<nav id="nav">
<a id="cover" onclick="clickMenu(this.id)">1</a>
<a id="about" onclick="clickMenu(this.id)">2</a>
<a id="freedom" onclick="clickMenu(this.id)">3</a>
<a id="thinking" onclick="clickMenu(this.id)">4</a>
<a id="projects" onclick="clickMenu(this.id)">5</a>
</nav><!-- /nav -->
</header>
<article class="cover"></article>
<article class="about"></article>
<article class="thinking"></article>
<article class="freedom"></article>
<article class="projects"></article>
</body>
</html>
Надеюсь поможете доковырять его до более менее работоспособного состояния, у самого знаний не хватат, так как практически с этого примера и начал изучать.
Заранее спасибо за помощь.
