slideToggle анимирует div вверх и вниз непрерывно

Я использую slideToggle, чтобы мой заголовок перемещался со страницей, когда scrollTop попал в 100. Но как только полоса прокрутки достигает 100 и более, она продолжает анимацию вверх и вниз в течение нескольких минут. Вот мой код:slideToggle анимирует div вверх и вниз непрерывно

$(window).scroll(function(){ 
    var ScrollTop = $(window).scrollTop(); 
    if(ScrollTop>=100){ 
     $('#main_header').removeClass("relative"); 
     $('#main_header').addClass("fixed"); 
     $('#main_header').slideToggle("slow"); 
    }else if(ScrollTop<=99){ 
     $('#main_header').removeClass("fixed"); 
     $('#main_header').addClass("relative"); 
    } 
});

пожалуйста, дайте мне знать, что это не так?

источник

2016-05-09 mauzzamali

Вы можете воссоздать проблему на https://jsfiddle.net –

Кажется, вы должны использовать [ 'stop()'] (http://api.jquery.com/stop/), т.е. '$ ('# main_header'). stop (true) .slideToggle (" slow ");' – Satpal

Это происходит потому, что когда вы добавьте класс «fixed» в свой заголовок, он вытащит из потока страницы, и, следовательно, прокрутка снова будет равна высоте заголовка. Теперь состояние прокрутки изменилось, поэтому он удалил класс «fixed». После добавления свиток снова больше порога. Вот почему он продолжает двигаться вверх и вниз, когда вы находитесь в этом диапазоне. После того, как вы перешли этот диапазон, когда добавление/удаление высоты заголовка не изменяет условия прокрутки, оно начинает работать нормально. –

Вы говорите обозревателю, всякий раз, когда пользователь прокручивает страницу вниз, посмотрите, как далеко они прошли. Если они прошли более 99, то сместите этот заголовок, в противном случае выполните некоторые другие переключения классов.

Итак, скажем, они прокручиваются до 120, они будут скользить. Затем они прокручиваются вниз до 140, он будет скользить. У вас нет чека на то, что он уже соскользнул, и он будет продолжать делать это. Простой подход был бы просто добавить логическое значение: -

var toggled = false; 

$(window).scroll(function() { 
    var ScrollTop = $(window).scrollTop(); 

    if (ScrollTop >= 100 && !toggled) { 
     $('#main_header') 
      .removeClass("relative") 
      .addClass("fixed") 
      .stop() // stop any prev animation 
      .css('display', 'none') // force hide so it slides 
      .slideToggle("slow"); 

     toggled = true; // won't enter again until set to false 
    } else if (ScrollTop <= 99 && toggled) { 
     $('#main_header').removeClass("fixed"); 
     $('#main_header').addClass("relative"); 

     toggled = false; // scrolled back up, can now slideToggle again! 
    } 
});

источник

2016-05-09 12:25:46 Shakespeare

Когда я прокручиваюсь в первый раз, заголовок поднимается и не приходит !!! – mauzzamali

@mauzzamali попробуйте изменить 'slideToggle' на' slideDown' – Shakespeare

Я сделал !! slideDown не анимирует его .. он падает быстро, и я дал медленный параметр, но результат такой же. – mauzzamali

Использование JQuery .stop() метод:

$(window).scroll(function(){ 
    var ScrollTop = $(window).scrollTop(); 
    if(ScrollTop>=100) { 
     $('#main_header').removeClass("relative"); 
     $('#main_header').addClass("fixed"); 
     $('#main_header').stop(true).slideToggle("slow"); 
    } else if(ScrollTop<=99) { 
     $('#main_header').removeClass("fixed"); 
     $('#main_header').addClass("relative"); 
    } 
});

источник

2016-05-09 12:26:44

slideToggle анимирует div вверх и вниз непрерывно

ответ

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