Показать ДИВ на прокрутки вниз эффекта в страницу, которая занимает всю высоту

Я следующую структуру:Показать ДИВ на прокрутки вниз эффекта в страницу, которая занимает всю высоту

<body> 
    <div id="first-div"> 
     <div id="second-div"></div> 
     <div id="third-div"></div> 
    </div> 
</body> 

#first-div { 
     height: 100%; 
} 
#second-div, #third-div { 
    display: none; 
}

При обнаружении первой прокрутки вниз события мне нужно # второго DIV будет отображаться, если в секунду событие прокрутки вниз, мне нужно # третье-div для отображения и # second-div для скрытия. Моя проблема заключается в следующем: один прокрутка вниз на тачпаде может вызвать несколько событий, таким образом, сразу же показывая # second-div и # third-div.

$(body).on('DOMMouseScroll mousewheel', function (event) { 
           if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { 
            //scroll down 
            console.log('Down'); 
           } else { 
            //scroll up 
            console.log('Up'); 
           } 
           //prevent page fom scrolling 
           return false; 
          });

Как определить событие прокрутки вниз, остановить событие прокрутки и показать # second-div. Затем определите другое событие прокрутки вниз, остановите событие прокрутки и скройте # second-div и покажите # third-div?

Кроме того, после этого я обнаруживаю событие прокрутки вверх, останавливает событие прокрутки и скрывает # third-div и показывает # second-div. Затем определите другое событие прокрутки вверх, остановите событие прокрутки и скройте # second-div?

спасибо.

источник

2015-05-30 perpetual_dream

Вы пробовали библиотеку [fullPage.js] (http://alvarotrigo.com/fullPage/)? – Alvaro

Этот фрагмент кода использует scroll метод JQuery (есть аналогичный вопрос: Differentiate between scroll up/down in jquery?)

$(window).scroll(function(e) { 
 
    var target = e.currentTarget, 
 
    $self = $(target), 
 
    scrollTop = window.pageYOffset || target.scrollTop, 
 
    lastScrollTop = $self.data("lastScrollTop") || 0, 
 
    scrollHeight = target.scrollHeight || document.body.scrollHeight, 
 
    scrollText = ""; 
 

 
    if (scrollTop > lastScrollTop) { 
 
    scrollText = "<b>scroll down</b>"; 
 
    } else { 
 
    scrollText = "<b>scroll up</b>"; 
 
    } 
 

 
    $(".test").html(scrollText + 
 
    "<br>innerHeight: " + $self.innerHeight() + 
 
    "<br>scrollHeight: " + scrollHeight + 
 
    "<br>scrollTop: " + scrollTop + 
 
    "<br>lastScrollTop: " + lastScrollTop + 
 
    "<br>" + scrollText); 
 

 
    if (scrollHeight - scrollTop === $self.innerHeight()) { 
 
    console.log("► End of " + scrollText); 
 
    } 
 

 
    //saves the current scrollTop 
 
    $self.data("lastScrollTop", scrollTop); 
 
});

#first-div { 
 
    height: 100%; 
 
} 
 
#second-div, 
 
#third-div { 
 
    display: none; 
 
} 
 
.test { 
 
    margin: 200px auto 200px auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="first-div"> 
 
    <div class="test"> 
 
    scroll info</div> 
 
</div> 
 
<div id="second-div"> 
 
    <div class="test"></div> 
 
</div> 
 
<div id="third-div"> 
 
    <div class="test"></div> 
 
</div>

источник

2015-05-30 12:58:49 user2314737

Привет, я не понимаю, как я могу использовать это для решения моей проблемы. Однократное событие прокрутки вниз на сенсорной панели сделает этот код несколько раз, если (scrollTop> lastScrollTop) { scrollText = "прокрутите вниз"; } else { scrollText = "scroll up"; } .... таким образом, показывая мой второй и третий div одновременно ... когда происходит событие прокрутки вниз, я хочу сначала показать # second-div, и когда будет создано новое событие прокрутки, show third-div .... with текущий код, по-видимому, не способен понять, как ограничить прокрутку, показывая один div вместо двух ... –

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

В настоящее время это самый популярный плагин для подобных сайтов. Работает в современных и старых браузерах, сенсорных устройствах и отлично реагирует на кинетическую прокрутку в ноутбуках Apple. Он обрабатывает URL-адреса хэшей, возвращающие ссылки (привязные ссылки), изменение размера ...

Множество настраиваемых параметров, методов и обратных вызовов.

высоко протестированы в различных устройствах и браузерах тысячи человек (Windows Phone, Adroid, IOS, сенсорный экран компьютера, Opera, Safari ...)
Совместимость с сенсорными устройствами.
Совместимость с кинетической прокруткой (ноутбуки Apple, волшебная мышь ...).
Совместимость со старыми браузерами (IE 8, Opera 12 ...).
Хорошая производительность для современных браузеров и сенсорных устройств (css3).
Пересчитать разделы и слайды при изменении размера окна просмотра.
Возврат якорей в URL.
Отзывчивый режим.
Специальные функции (клавиатура, полоса прокрутки, история браузера).
Использование обратных вызовов для действий огня.
Много методов и вариантов.

И вы получите все это для всего 7Kb gzipped, если вы используете fullPage.js.

источник

2015-06-01 10:01:49 Alvaro

Показать ДИВ на прокрутки вниз эффекта в страницу, которая занимает всю высоту

ответ

Смежные вопросы