Отслеживание скролла для меню js

61

Green arrow

22 июля 2016, 10:34

2141

Доброго времени.

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

В инете куча примеров, но все они работают по одному принципу - отступил от верха на n-пикселей -> получил класс с фиксированным позиционированием и z-index'ом.

например

$(window).scroll(function() {

 if ($(this).scrollTop() > 1){

   $('.menu').addClass("new-class");

 }else{

  $('.menu').removeClass("new-class");

 }

});

Это не совсем то, нужно, чтобы пока пользователь прокручивает страницу (не важно в каком направлении: вверх или вниз) скрипт добавляет блоку ещё дополнительный класс, а когда пользователь остановился - класс удаляется (это помимо правила выше). Подскажите вариант.

204

дани мапов

22 июля 2016, 13:31

#1

Попробуйте так - http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)

GA

61

Green arrow

31 июля 2016, 13:06

#2

дани мапов:
Попробуйте так - http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling

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

Вот так получилось.

$(window).scroll($.debounce( 150, true, function(){

		$('#super').toggleClass('one').toggleClass('two');

	} ) );

	$(window).scroll($.debounce( 150, function(){

		$('#super').toggleClass('two').toggleClass('one');

	} ) );

Класс изначальный - one. Подскажите, как обернуть это всё дело в условие: если область просмотра (окна) от 768 до 1280 px, то добавлять класс one и уже разрешать выполнение скрипта выше.

Пробовал чем-то подобным

$(window).resize(function(){

    var windowWidth = $(window).width();

    if(windowWidth > 500,)$("#super").removeClass("one");

   else $("#super").addClass("one");

  });

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

94

Gerga

31 июля 2016, 17:18

#3

Green arrow, попробуйте так


var removeTimeoutID, $menu = $('.menu');    
$(window).scroll(function() {    
    clearTimeout(removeTimeoutID);
    $menu.addClass('new-class');
    removeTimeoutID = setTimeout(function(){
        $menu.removeClass('new-class');
    }, 400);
});

GA

61

Green arrow

2 августа 2016, 13:29

#4

Gerga:
попробуйте так

Честно сказать не понял, что это и какой результат должен быть.

94

Gerga

2 августа 2016, 14:33

#5

Green arrow,

Green arrow:
Хочу сделать так, чтобы меню при прокрутке становилось полупрозрачным, а при остановке возвращалось в исходное состояние. Для этого нужно добавлять класс через js.

GA

61

Green arrow

2 августа 2016, 15:02

#6

Gerga, а, ну так я выше написал, что нашел в совете выше библиотеку, которая так умеет.

Ваш вариант почему-то не сработал.

Да и задача сейчас другая, надо чтобы вот этот вот код

$(window).scroll($.debounce( 150, true, function(){
		$('#super').toggleClass('one').toggleClass('two');
	} ) );
	$(window).scroll($.debounce( 150, function(){
		$('#super').toggleClass('two').toggleClass('one');
	} ) );

Выполнялся только при условии ниже:

Класс изначальный - one. Подскажите, как обернуть это всё дело в условие: если область просмотра (окна) от 768 до 1280 px, то добавлять класс one и уже разрешать выполнение скрипта выше.

Что почем!? (знаешь ли el.hasClass в JS javascript нужен маленький хелп

I2

38

indenger20

2 августа 2016, 16:02

#7

Ну, наверное, как-то так.


$(window).scroll($.debounce( 150, true, function(){

    if( $(window).width() > 768 && $(window).width() < 1280 ) {

        $('#super').toggleClass('one').toggleClass('two');

    }

    

}));

$(window).scroll($.debounce( 150, function(){

    if( $(window).width() > 768 && $(window).width() < 1280 ) {

        $('#super').toggleClass('two').toggleClass('one');

    }

}));

Качественная верстка PSD макетов (/ru/forum/974524)

94

Gerga

2 августа 2016, 16:35

#8

Green arrow:
а, ну так я выше написал, что нашел в совете выше библиотеку, которая так умеет.

так зачем использовать лишнею библиотеку, если можно обойтись парой строк?

Green arrow:
Ваш вариант почему-то не сработал.

Значит вы что-то не правильно сделали, https://jsfiddle.net/webxz/ux9Lsdku/ .

GA

61

Green arrow

2 августа 2016, 16:56

#9

indenger20:
Ну, наверное, как-то так.


$(window).scroll($.debounce( 150, true, function(){

    if( $(window).width() > 768 && $(window).width() < 1280 ) {

        $('#super').toggleClass('one').toggleClass('two');

    }

    

}));

$(window).scroll($.debounce( 150, function(){

    if( $(window).width() > 768 && $(window).width() < 1280 ) {

        $('#super').toggleClass('two').toggleClass('one');

    }

}));

Спасибо, работает )

Gerga:
так зачем использовать лишнею библиотеку, если можно обойтись парой строк?
Значит вы что-то не правильно сделали, https://jsfiddle.net/webxz/ux9Lsdku/ .

Извиняюсь, действительно, как-то коряво значит опробовал.

Ок, есть два момента:

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

2. если остановиться где-нибудь ниже на странице (чтобы хоть немного оставался скролл вверх), то если обновить страницу (F5 или просто обновление) - скрипт отрабатывает и получается эффект моргания. С этим можно как-то бороться?

JavaScript. Что-то не так Как разместить подсказку ниже Нужен скрипт сборки контактов

Google: E-E-A-T не является фактором ранжирования

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта