[英]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');
}
});
进行了一些故障排除,但我相信我发现了问题:
如果文档在加载时没有滚动超过标题,则将向上箭头的 css 设置为display:none
。
但是,当它滚动到足够远时,您只需设置position: fixed
- 您实际上并没有重新打开它。
所以改变这一行:
$('#up-arrow').css('position', 'fixed').css('right', '0');
到:
$('#up-arrow').css({'position': 'fixed', 'display': 'block', 'right' : 0});
它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.