Вопрос:

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

javascript jquery scroll jquery-animate scrolltop

96 просмотра

1 ответ

3 Репутация автора

У меня есть следующий код JavaScript / jQuery. Я не вижу никаких проблем с этим, но он не работает правильно.

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > 0) {
            $("#forumHeader").animate({top: '250px'});
        }
        else
        {
            $("#forumHeader").animate({top: '60px'});
        }
    });
});
#forumHeader
{
    position: absolute;
    top: 60px;
    left: 0%;
    height: 100px;
    width: 200px;
    color: white;
    background-color: red;
}

#content
{
    height: 1000px;
    background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="forumHeader">Forum Header</div>
<div id="content">Some content here</div>

Первый раз, когда я прокручиваю вниз, он работает как надо и анимирует #forumHeader top: 250px. Но когда я снова прокручиваю вверх, может пройти несколько секунд, пока он не оживет обратно: 60 пикселей. Иногда оно меняется взад и вперед, иногда оно может ничего не делать. В чем проблема? Пожалуйста помоги ..

Автор: Galaniitoluodda Источник Размещён: 08.11.2017 10:47

Ответы (1)


0 плюса

1173 Репутация автора

Решение

Я хотел бы использовать JQuery для добавления и удаления класса, а затем использовать переход CSS

$(document).ready(function(){

     // EDIT - Move the selector outside of the scroll event as suggested
     var header = $("#forumHeader");

     $(window).scroll(function(){

        if($(window).scrollTop() > 0) {
            header.addClass('slide');
        } else {
            header.removeClass('slide');
        }
    });
});
#forumHeader{
    top: 60px;
    -webkit-transition: top 500ms ease-out ;
    -moz-transition: top 500ms ease-out ;
    -o-transition: top 500ms ease-out ;
    transition: top 500ms ease-out ;
}
#forumHeader.slide{
    top: 250px;
}
#content
{
height: 1000px;
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="forumHeader">Forum Header</div>
<div id="content">Some content here</div>

Надеюсь это поможет

Автор: Jim-miraidev Размещён: 08.11.2017 10:58
Вопросы из категории :
32x32