Подтвердить что ты не робот

Обратный прокрутка

У меня возникли проблемы с поиском решения того, что я пытаюсь выполнить. Я пытаюсь использовать JS (или дополнительные библиотеки), чтобы сделать так, чтобы, когда пользователь прокручивается на колесико мыши, страница прокручивает противоположный путь, чем обычно.

В принципе, я хочу, чтобы нижняя часть страницы была видна первой, и по мере прокрутки пользователя я хочу, чтобы верхняя часть экрана отображалась в поле зрения. Единственным примером, который я смог найти, является правый столбец http://conduit.com/.

Я создал JSFiddle http://jsfiddle.net/5UUtV/ с примером, чтобы визуализировать его. Я знаю, что это может иметь какое-то отношение к:

window.scrolltop();

но, честно говоря, я не уверен в лучшем способе этого.

Я хочу, чтобы панель с надписью "1" была видна первой, а остальная часть - вниз, когда пользователь прокручивается.

Будем очень благодарны за любые идеи о том, как это можно сделать.

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

вот решение - http://jsfiddle.net/5UUtV/1/

JS

var winHeight = $(window).innerHeight();
$(document).ready(function () {
    $(".panel").height(winHeight);
    $("body").height(winHeight*$(".panel").length);
});

window.addEventListener('resize', function (event) {
    $(".panel").height($(window).innerHeight());
});
$(window).on('scroll',function(){
    $(".panelCon").css('bottom',$(window).scrollTop()*-1);
});

HTML

<body>
    <div class="panelCon"> 
    <div id="pane-5" class="panel">
        <h1>5</h1>
    </div>
    <div id="pane-4"class="panel">
        <h1>4</h1>
    </div>
    <div id="pane-3"class="panel">
        <h1>3</h1>
    </div>
    <div id="pane-2" class="panel">
        <h1>2</h1>
    </div>
    <div id="pane-1" class="panel">
        <h1>1</h1>
    </div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
}
.panelCon{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
}
.panel {
    width: 100%;
}
.panel h1 {
    width: 100px;
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
    top: 50%;
}
#pane-1 {
    background-color: green;
}
#pane-2 {
    background-color: red;
}
#pane-3 {
    background-color: white;
}
#pane-4 {
    background-color: pink;
}
#pane-5 {
    background-color: yellow;
}