Я создаю веб-сайт, и я хочу разместить несколько ссылок фиксированного типа внизу. Когда вы нажимаете на одну из этих ссылок, вы делаете одно изображение на страницу до следующего изображения и так далее. И если вы прокрутите вниз, вы тоже спуститесь к этой картине. НО Я хочу избавиться от полос прокрутки. Это означает, что вы можете спуститься при прокрутке, но вы не можете видеть, где именно вы находитесь на этой странице.
Вот что я буду делать: у меня будет весь охватывающий HTML-контейнер, а затем перемещайте дочерний контент соответственно на основе ваших пользовательских событий. Например, onClick одной из ваших "фиксированных" ссылок, а также onScroll окна вы можете инициировать одно и то же событие, по существу.
HTML:
<div id="container">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<div id="links">
<a href="0" class="contentLink">link 1</a> |
<a href="1" class="contentLink">link 2</a> |
<a href="2" class="contentLink">link 3</a> |
<a href="3" class="contentLink">link 4</a>
</div>
</div>
CSS:
#container, #content1, #content2, #content3, #content4 {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
overflow: hidden;
z-index: 1;
}
#content1 { top: 0%; background: green; }
#content2 { top: 100%; background: red; }
#content3 { top: 200%; background: orange; }
#content4 { top: 300%; background: purple; }
#links {
position: absolute;
bottom: 10px; left: 10px;
z-index: 2;
}
JS:
$(function() {
var currentPos = 0,
scrollDirection;
$(".contentLink").click(function(evt) {
// prevent default behavior to avoid page refresh
evt.preventDefault();
// get the desired position
newPos = $(this).attr("href");
// if the current position is less than the desired position
// move content up, if it greater than - move it down
// do nothing if they're equal
if (newPos > currentPos) {
$("#content1, #content2, #content3, #content4").animate({
top: "-=" + ((newPos-currentPos) * 100) + "%"
}, 1000);
} else if (newPos < currentPos) {
$("#content1, #content2, #content3, #content4").animate({
top: "+=" + ((currentPos-newPos) * 100) + "%"
}, 1000);
}
// reset currentPos accordingly
currentPos = newPos;
});
});
Надеюсь, это поможет!