jQuery ScrollTop()函数无法正常工作

时间:2012-11-18 02:48:42

标签: javascript jquery css scroll scrolltop

我正在尝试使用响应式设计实现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');
            }
        });

1 个答案:

答案 0 :(得分:3)

需要一些故障排除,但我相信我发现了问题:

如果文档未在加载时滚过标题,则将向上箭头的css设置为display:none

但是,当它滚动得足够远时,你只设置position: fixed - 你实际上并没有将它重新打开。

所以改变这一行:

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

要:

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

它会起作用。