javascript - jQuery ScrollTop() 函数不起作用

Question

我正在尝试使用响应式设计实现 scrollTop() 函数，但由于某些原因，这段代码无法正常工作。

下面检查页面是否完全加载，而不是检查页面是否已经滚动。然后，在确保页面已经滚动到页眉之后，它会出现一个固定在屏幕顶部的图像，这会将页面发送到屏幕顶部。我的问题是图像不会出现。感谢您的帮助!

$(document).ready(function() {
            if ($(document).width() > 650) {
                $('#welcome').css('padding-top', $('#header').height() + 50 + 'px');
                $(document).scroll(function() {
                    if ($(document).scrollTop() >= $('#header').height()) {
                        $('#up-arrow').css('position', 'fixed').css('right', '0');
                    } else {
                        $('#up-arrow').css('display', 'none');
                    }
                });
            } else {
                $('#welcome').css('padding-top', '25px');
            }
        });
        $(window).resize(function() {
            if ($(document).width() > 650) {
                $('#welcome').css('padding-top', $('#header').height() + 50 + 'px');
                $(document).scroll(function() {
                    if ($(document).scrollTop() >= $('#header').height()) {
                        $('#up-arrow').css('position', 'fixed').css('right', '0').css('display','block');
                    } else {
                        $('#up-arrow').css('display', 'none');
                    }
                });
            } else {
                $('#welcome').css('padding-top', '25px');
            }
        });

Answer 1

我进行了一些故障排除，但我相信我找到了问题所在:

如果文档在加载时没有滚动过标题，则将向上箭头的 css 设置为 display:none。

但是，当它滚动到足够远时，您只需设置 position: fixed - 您实际上并没有将其重新打开。

所以改变这一行:

$('#up-arrow').css('position', 'fixed').css('right', '0');

收件人:

$('#up-arrow').css({'position': 'fixed', 'display': 'block', 'right' : 0});

它会起作用。