Можно ли определить, прокручивает ли пользователь больше 20 пикселей на странице?

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

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

Повторите эту функцию независимо от того, где она находится на странице.

Мой текущий код:

$(window , 'body').on('scroll', function() {
    $('.navbar-collapse').collapse('hide');
    $("#wrapper").removeClass('newsletter-opened');
        $("#newsletter").removeClass('opened');
});

Спасибо!

1
user3817291 24 Апр 2017 в 13:26

2 ответа

Лучший ответ

Вы можете использовать jQuery для этого.

С моим решением, если у пользователя есть прокрутка 200px, когда он заходит на вашу страницу, если он прокручивал вверх или вниз с минимальной прокруткой 20px, то ваши изменения назывались.

var userScroll = $(document).scrollTop();

$(window).on('scroll', function() {
   var newScroll = $(document).scrollTop();
   if(userScroll - newScroll > 20 || newScroll - userScroll > 20){
      $('.navbar-collapse').collapse('hide');
      $("#wrapper").removeClass('newsletter-opened');
      $("#newsletter").removeClass('opened');
   }
}

РЕДАКТИРОВАТЬ:

После просмотра вашего jsFiddle, я знаю, что вы хотите, просто проверьте, что:

Просто определите прокрутку в тот момент, когда включен popin, и выполняйте свою работу только тогда, когда у popin есть класс opened

$(document).ready(function(){   
    $("a.open-newsletter").on( "click", function() {
        $("#newsletter").toggleClass('opened');
        userScroll = $(document).scrollTop();
        return false;
    });

    $(window , 'body').on('scroll', function() {
        if ( $("#newsletter").hasClass('opened') ) {
            var newScroll = $(document).scrollTop();
            if (userScroll - newScroll > 100 || newScroll - userScroll > 100) {
                $("#newsletter").removeClass('opened');
            }
        }
    });
});
1
Cyril Beeckman 24 Апр 2017 в 12:23

На самом деле, функция прокрутки действует на каждом пикселе прокручиваемой страницы, что слишком тяжело с точки зрения производительности.

В результате, если вы просто возьмете разницу между newScroll & userScroll, результат иногда может быть неправильным (потому что новые и старые позиции прокрутки будут обновлены в ближайшее время по мере продвижения страницы)

Поэтому мы можем просто установить временной интервал, который проверяет положение прокрутки каждые 250 миллисекунд (это одновременно повысит производительность и даст пользователям время для прокрутки более 20 пикселей в соответствии с вашими требованиями):

var didScroll;
var lastScrollTop = 0;
var delta = 20;

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Return if they scroll less than 20px (delta)
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // Do what you want here
    console.log("lastScrollTop: ",lastScrollTop, " - newScroll: ", st);
    $('.navbar-collapse').collapse('hide');
    $("#wrapper").removeClass('newsletter-opened');
    $("#newsletter").removeClass('opened');     

    lastScrollTop = st;
}

РЕДАКТИРОВАННАЯ ВЕРСИЯ НИЖЕ:

(согласно вашей скрипке, я удалил «use strict» и закомментировал $ ('. navbar-collapse') & $ ('# wrapper'))

Не могли бы вы повторить попытку (кажется, что некоторые предыдущие ошибки просто не позволили моему коду выполнить)

$(document).ready(function(){

    $("a.open-newsletter").on( "click", function() {
            $("#newsletter").toggleClass('opened');
            return false;
    });

    var didScroll;
    var lastScrollTop = 0;
    var delta = 20;
    $(window).scroll(function(event){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();

        // Return if they scroll less than 20px (delta)
        if(Math.abs(lastScrollTop - st) <= delta)
            return;

        // Do what you want here
        console.log("lastScrollTop: ",lastScrollTop, " - newScroll: ", st);
        //$('.navbar-collapse').collapse('hide');
        //$("#wrapper").removeClass('newsletter-opened');
        $("#newsletter").removeClass('opened');     

        lastScrollTop = st;
    }

});
0
thinhvo0108 24 Апр 2017 в 12:44
43585648