jQuery ScrollTop（）函数无法正常工作(jQuery ScrollTop() function not working)

jQuery ScrollTop（）函数无法正常工作(jQuery ScrollTop() function not working)

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

I'm trying to implement the scrollTop() function with a responsive design, but for some reason this code won't work.

The following checks if the page is completely loaded, than it it checks if the page has been scrolled at all. Than, after making sure that the page has scrolled past the header, it makes an image appear that is fixed at the top of the screen which will send the page to the top of the screen. My problem is that the image won't appear. Any help is appreciated!

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

最满意答案

它需要一些故障排除，但我相信我发现了这个问题：

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

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

所以改变这一行：

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

至：

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

它会工作。

It took some troubleshooting, but I believe I found the issue:

If the document is not scrolled past the header on load, you set the css for the up-arrow to display:none.

But, when it IS scrolled far enough, you only set the position: fixed - you don't actually turn it back on.

So change this line:

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

To:

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

And it will work.