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

GA
На сайте с 16.06.2013
Offline
61
1972

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

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

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

например

$(window).scroll(function() {

if ($(this).scrollTop() > 1){
$('.menu').addClass("new-class");
}else{
$('.menu').removeClass("new-class");
}
});

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

дани мапов
На сайте с 06.09.2012
Offline
192
#1
Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
GA
На сайте с 16.06.2013
Offline
61
#2

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

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

$(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");
});

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

Gerga
На сайте с 02.08.2015
Offline
89
#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
На сайте с 16.06.2013
Offline
61
#4
Gerga:
попробуйте так

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

Gerga
На сайте с 02.08.2015
Offline
89
#5

Green arrow,

Green arrow:
Хочу сделать так, чтобы меню при прокрутке становилось полупрозрачным, а при остановке возвращалось в исходное состояние. Для этого нужно добавлять класс через js.
GA
На сайте с 16.06.2013
Offline
61
#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 и уже разрешать выполнение скрипта выше.
I2
На сайте с 07.03.2015
Offline
38
#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)
Gerga
На сайте с 02.08.2015
Offline
89
#8
Green arrow:
а, ну так я выше написал, что нашел в совете выше библиотеку, которая так умеет.

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

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

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

GA
На сайте с 16.06.2013
Offline
61
#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 или просто обновление) - скрипт отрабатывает и получается эффект моргания. С этим можно как-то бороться?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий