Тема: Навигация по одностраничному сайту
Показать сообщение отдельно
  #1 (permalink)  
Старый 10.05.2012, 23:46
Интересующийся
Отправить личное сообщение для Gesandte Посмотреть профиль Найти все сообщения от Gesandte 		 
Регистрация: 13.12.2011
Сообщений: 26

Навигация по одностраничному сайту
Всем добрый вечер)
Попробывал реализовать навигацию по одностраничному сайту, делал все в фф и как следствие там все хорошо. После того как протестировал других браузерах, понял что все не очень хорошо. Где-то не реагирует на нажатие по ссылке, где-то все скочет...

Ссылка на страничку - 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>


Надеюсь поможете доковырять его до более менее работоспособного состояния, у самого знаний не хватат, так как практически с этого примера и начал изучать.

Заранее спасибо за помощь.
Ответить с цитированием