Question

我正在尝试创建一个“向上”按钮，该按钮会将用户带到目标网页的最顶层。 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比slideDown()和slideUp()应用的css更重要。

在我开始使用.hidden-xs之前，它很有用。

我尝试了$.animate({'display': 'none!important'})而不是$.slideUp，但后来又遇到了另一个问题 - jQuery没有正确选择:hidden的元素。 jsFiddle

你有什么想法，我可能做错了什么？有没有办法很好地做到这一点？

提前致谢！

Answer 1

尝试

(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);
    });
})()

演示：Fiddle

在jQuery中显示/隐藏bootstap的.hidden-xs

1 个答案: