Скроллинг и разбиение страницы
Доброе время суток! Увидел на одном сайте красивый скролинг от одного, наверное, блока к другому (Не сочтите за рекламу, увидел здесь)
Попытался реализовать свою грубую, корявую версию:
function heigth_inc()
{
var container = document.getElementById('container');
var container_second = document.getElementById('container_second');
container.style.height = document.body.clientHeight - 18 +'px';
container_second.style.height = document.body.clientHeight - 18 +'px';
}
var i_scroll = 0;
var pause = 2;
var step = 2;
var scrollheight = document.body.clientHeight;
function scrollwindow() {
window.scroll(0,i_scroll)
i_scroll+= step;
if (i_scroll >= scrollheight){
return;
}
var timer = setTimeout("scrollwindow()",pause)
}
window.onload=scrollwindow;
</script>
<body onload='heigth_inc()' style='background-color: #000000;'> <div id="container" style="border: 1px solid #000; background-color: #000000; color: #FFFFFF; width: 100%;"> test <br> <button onclick="scrollwindow()">Скроллинг</button> </div> <div id="container_second" style="border: 1px solid #000; background-color: #FFFFFF; color: #000000; width: 100%;"> test2 </div> </body> Естественно, вышло коряво :D Сам я новичок в этом. В общем, был бы крайне благодарен за подсказки\помощь в реализации подобного скролинга или может кто-то встречал уже готовые реализации такого... Еще, возможно не совсем по теме, но хотелось бы узнать подробней о таком разбиении страницы на 2 блока а-ля 2 странички отдельные. Изначально, я подумал, что это 2 div блока, собственно так и пытался писать. Пробовал искать в поисковике подобное, но так и не нашёл, возможно формулирую не верные запросы |
если scrollTop ниже высоты первого элемента то scrollTo ко второму и наоборот
|
Цитата:
|
не совсем верное условие If
Возник вопрос:
Пытаюсь сделать, как написали выше, применяя ScrollTop и ScrollTo, но не совсем получается из-за условия if. После того, как меня перекидывает в нужный мне блок, я не могу вернуться склором обратно к первому (верхнему) блоку, тк мешает условие, что если СкролТоп ниже, чем высота элемента... Собственно, как тут надо правильно делать условие?
<html>
<head>
<title>Prototype</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='jquery.scrollTo-1.4.3.1.js'></script>
<script>
function heigth_inc(){
var container = document.getElementById('container');
var spacer = document.getElementById('spacer');
var container_second = document.getElementById('container_second');
//alert(document.body.clientHeight);
container.style.height = document.body.clientHeight +'px';
spacer.style.height = 600 +'px';
container_second.style.height = document.body.clientHeight +'px';
}
$(document).ready(function(){
//функция для доп эффекта
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
$('a.one').click(function(){
var idscroll = $(this).attr('href');
$.scrollTo(idscroll, 1000, {easing:'elasout'});
return false;
});
$(window).scroll(function(){
//alert("Вы прокрутили содержимое данного окна.");
if ($(document).scrollTop() > container.offsetHeight){
var idscroll = document.getElementById('container_second');
$.scrollTo(idscroll, 1000, {easing:'elasout'});
//alert($(document).scrollTop() + ' ' + container.offsetHeight)
}
/*if ($(document).scrollTop() < container.offsetHeight){
var idscroll = document.getElementById('container');
$.scrollTo(idscroll, 1000, {easing:'elasout'});
//alert($(document).scrollTop() + ' ' + container.offsetHeight)
}*/
});
});
</script>
<style>
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a{
margin: 3px 0;
width: 100px;
background: #f3f3f3;
display: block;
padding: 5px 10px;
text-decoration: none;
color: #666;
}
.nav ul li a:hover{
background: #f7f7f7;
text-decoration: none;
color: #999;
}
</style>
</head>
<body onload='heigth_inc()' style='background-color: #000000;'>
<div class="nav" style="position:fixed; left: 20px; top: 10px;">
<h3>Пример</h3>
<ul>
<li><a class="one" href="#container">Верх</a></li>
<li><a class="one" href="#container_second">Низ</a></li>
</ul>
</div>
<div id="container" class='selector' style="border: 1px solid #000; background-color: #000000; color: #FFFFFF; width: 100%;">
test
<br>
</div>
<div id="spacer" style="border: 1px solid #000; background-color: #000000; color: #FFFFFF; width: 100%;">
spacer
<br>
</div>
<div id="container_second" style="border: 1px solid #000; background-color: #FFFFFF; color: #000000; width: 100%;">
test2
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:23. |