0

У меня есть скрипт stickUp, который фиксирует меню при скруле и добавляет этому меню класс isStuck, который отвечает за position:fixed. У меня есть задача: добавить блок с произвольным содержимым в меню только тогда, когда появляется класс isStuck (когда скрулим страницу и меню фиксируется).

Пытался делать так, не помогло:

$('.isStuck').html( "<p>Test</p>" );

И так:

$('.isStuck').append( "<p>Test</p>" );

И даже так, но здесь содержимое появляется бесконечно:

$(window).scroll(function() {
    if($(this).scrollTop() >= 190) {
        $('.isStuck').append( "<p>Test</p>" );
    }
    else {
        $('.isStuck').remove( "<p>Test</p>" );
    }
});

1 ответ 1

0

У Вас if($(this).scrollTop() >= 190) срабатывает постоянно, и поэтому бесконечно добавление идет.

Если использовать Ваш код, то нужно добавить индикатор того, что блок уже есть.

var isStuckBlockAdded = false;

...

$(window).scroll(function() {
    if($(this).scrollTop() >= 190) {
         if (!isStuckBlockAdded) {
             isStuckBlockAdded = true;
             $('your-block-selector').append( "<p class="new-block">Test</p>" ); 
             //your-block-selector - селектор для элемента, 
             //в который нужно добавить блок 
             //(убрал .isStuck, т.к. неизвестно к этому моменту будет ли класс уже добавлен)
         }
    }
    else {
         if (isStuckBlockAdded) {
             $('your-block-selector .new-block').remove();  
             //your-block-selector - селектор для элемента, 
             //из которого нужно удалить блок 
             //(убрал .isStuck, т.к. неизвестно к этому моменту не будет ли класс уже удален)
             isStuckBlockAdded = false;
         }
    }
});

Хотя я бы предложил события использовать

var Events = {
    StuckClassAdded = "StuckClassAdded"
};
...

//Где-то в инициализации
$(Events).on(Events.StuckClassAdded, function() {
   $('.isStuck').append( "<p>Test</p>" );
});

... 
// Там где добавляете класс
$(Events).trigger(Events.StuckClassAdded);
...

Удаление сделать аналогично.

4
  • 1
    в примере нигде не выставляется isStuckBlockAdded - этот флаг всегда false
    – Grundy
    26 окт 2016 в 14:58
  • @Grundy извиняюсь, пропустил. Спасибо за замечание. Получился и правда горе советчик :-) Поправил. 26 окт 2016 в 14:58
  • Первый вариант не удаляет. Второй вариант не работает. 26 окт 2016 в 16:10
  • @Александр, да, извиняюсь, снова проглядел, конечно же $('.isStuck') не будет работать, т.к. вы к этому времени скорее всего удалили уже класс, попробуйте свой селектор другой использовать, которым можно идентифицировать элемент. По второму варианту, нужно смотреть как у Вас сделано, это всего лишь рекомендация. 26 окт 2016 в 18:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.