JQuery исчезает при прокрутке вниз

0

У меня есть веб-страница, с которой, если вы прокрутите страницу более чем на 175 пикселей, появится окно "Назад на верх", чтобы вы могли вернуться назад к верхнему элементу.

Поэтому для этого я установил div для "BackToTop" с "Видимость: скрытый", чтобы он не отображался на веб-сайте при загрузке страницы, так как вы уже будете в верхней части страницы.

Затем, как только вы прокрутите 175px, div "BackToTop" исчезнет.

Только это не так. Сначала он появляется мгновенно, затем исчезает, затем снова исчезает при первой загрузке. После этого он работает правильно.

Кто-нибудь с любыми идеями о том, как исправить?

JS FIDDLE: http://jsfiddle.net/AuLFR/1/

HTML:

<div id="BackToTop">Back To Top</div>

CSS:

html {
    height:1000px;
}
#BackToTop {
    border-radius:10px;
    padding:5px;
    background-color:#ccc;
    display:block;
    visibility:hidden;
    position:fixed;
    top:10px;
    text-align:center;
    width:120px;
    left: 50%;
    margin-left:-60px;
}

JAVASCRIPT:

$(window).scroll(function () {
    if ($(this).scrollTop() > 175) {
        $('#BackToTop').css({
            'visibility': 'visible'
        });

        $("#BackToTop").fadeIn("slow", function () {});

    } else {
        //  $('#BackToTop').css({'visibility': 'hidden'});
        $("#BackToTop").fadeOut("slow", function () {});
    }

});
  • 0
    у меня это работает - использую Chrome / OSx
  • 0
    @DaveBriand Быстрая прокрутка вниз, я думаю, что она работает хорошо при медленной прокрутке. Также происходит только при первой прокрутке вниз. Нажмите обновить, чтобы воссоздать его.
Показать ещё 5 комментариев
Теги:

3 ответа

1
Лучший ответ

демонстрация

Использовать display:none поскольку работа fadeIn/Out не имеет видимости.

 $('#BackToTop').css({
    'visibility': 'visible'
 });

Код .css() выше, быстро меняет видимость элемента.

#BackToTop {

    display:none
}
Поделиться
2

Если вы хотите, чтобы он исчезал, вы должны изменить свойство непрозрачности, а не наглядность; Кроме того, определите объекты jQuery вне обработчика событий scoll, иначе это может стать дорогостоящим.

http://jsfiddle.net/AuLFR/3/

HTML

<div id="BackToTop">Back To Top</div>

JS

var $back_to_top = $('#BackToTop');

$(window).on('scroll', function () {

  if (window.scrollY > 175) {

    $back_to_top.addClass('active');

  } else {

    $back_to_top.removeClass('active');

  }

});

CSS

html {
    height:1000px;
}
#BackToTop {
    border-radius:10px;
    padding:5px;
    background-color:#ccc;
    display:block;
    position:fixed;
    top:10px;
    text-align:center;
    width:120px;
    left: 50%;
    margin-left:-60px;
    opacity: 0;
    transition-duration: 600ms;
}
#BackToTop.active {
    opacity: 1;
}
Поделиться
  • 0
    Обратите внимание, что переходы не работают со всеми браузерами ...
  • 0
    Спасибо за ваш ответ, Другой пользователь указал, что просто с помощью дисплея: нет; вместо «видимость: скрытый» будет работать нормально.
0

здесь скрипка: http://jsfiddle.net/AuLFR/6/

Я проверил ваш css prop, чтобы увидеть, было ли это видно, прежде чем пытаться скрыть его, используя это:

$(window).scroll(function () {
    console.log($(this).scrollTop());
    if ($(this).scrollTop() > 175) {
        $('#BackToTop').css({
            'visibility': 'visible'
        });

        $("#BackToTop").fadeIn("slow", function () {});

    } else {
        //  $('#BackToTop').css({'visibility': 'hidden'});
        if($('#BackToTop').css('visibility') == 'visible'){
            $("#BackToTop").fadeOut("slow", function () {});
        }
    }

});
Поделиться
  • 0
    Переходы кажутся лучше или, по крайней мере, используют событие остановки, потому что при прокрутке вверх и назад, вверх и назад ... это добавляет анимацию в очередь и может потребовать вечного показа, исчезновения, показа и исчезновения снова и снова.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню