Показ / скрытие загрузочного .hidden-xs в jQuery

Question

Показ / скрытие загрузочного .hidden-xs в jQuery

0

Я пытаюсь создать кнопку "вверх", которая приведет пользователя к самой верхней части целевой страницы. jsFiddle

Я бы хотел, чтобы эта кнопка отображалась только на устройствах с большими экранами, поэтому я использую класс bootstrap3 hidden-xs. Этот класс применяет display: none!important для небольших устройств и display: block!important для больших экранов.

Но теперь я хотел бы сделать эту кнопку видимой только при прокрутке не менее 50 пикселей. Итак, я хотел бы сделать что-то вроде:

$(document).ready(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() < 50) {
            // Near top.
            $('#scrollUp:visible').slideUp();
        }
        else {
            $('#scrollUp:hidden').slideDown();
        }
    });
});

jQuery slideUp() и slideDown() применяются для display: none и display: block, но без !important.

Это означает, что display: block!important .hidden-xs примененный .hidden-xs, более важен, чем css, применяемый slideDown() и slideUp().

Он отлично работал, пока я не начал использовать .hidden-xs.

Я пробовал $.animate({'display': 'none!important'}) $.slideUp $.animate({'display': 'none!important'}) вместо $.slideUp, но потом у меня возникает другая проблема - jQuery неправильно выбирает элементы с помощью :hidden. jsFiddle

У вас есть идея, что я могу сделать неправильно? Есть ли способ сделать это красиво?

Заранее спасибо!

lukaszzenko 02 дек. 2013, в 14:30

Источник

Теги:

javascript

jquery

twitter-bootstrap-3

slidedown

slideup

1 ответ

Ещё вопросы

Arun P Johny · Answer 1 · 2013-12-02T11-42-00.000Z

Пытаться

(function () {
    var timer;
    $(window).scroll(function () {
        clearTimeout(timer)
        timer = setTimeout(function () {
            if ($(window).scrollTop() < 50) {
                // Near top.
                console.log('If elemnt is visible it should be hidden here');
                $('#scrollUp:visible').stop(true, true).slideUp(function () {
                    $(this).removeClass('hidden-xs');
                });
            } else {
                console.log('If element is hidden it should be displayed here');
                $('#scrollUp:hidden').addClass('hidden-xs').stop(true, true).slideDown(function () {
                    $(this).css('display', '')
                });
            }
        }, 100);
    });
})()

Демо: скрипка