这可能很难解释,但假设我的浏览器尺寸很小,如图 1 所示。底部文本位于应有的位置,当我向下滚动时,脚本会激活。
EDIT https://jsfiddle.net/j4f53rds/1/ https://jsfiddle.net/j4f53rds/1/
function fixDiv() {
var $div = $("#nav_color");
var top = $div.data("top");
if ($(window).scrollTop() > top) {
$('#nav_color').css({'position': 'fixed', 'top': '0px'});
}
else {
$('#nav_color').css({'position': 'absolute', 'top' : top + 'px'});
}
}
$("#nav_color").data("top", $("#nav_color").offset().top);
$(window).scroll(fixDiv);
当用户向下滚动时,该脚本会使底部的文本固定在 html 的顶部。现在问题来了。触发后,如果我调整浏览器大小,请使其全屏显示,如图二所示,然后向上滚动。文本不会重新定位到新位置,而是重置回较小浏览器中的原始位置。当用户向后滚动时,如何让脚本考虑新的浏览器大小?
问题在于,您在页面加载时保存了顶部位置,但在调整窗口大小时该位置发生了变化。尝试这个:
$(window).resize(function() {
$("#nav_color").data("top", $("#nav_color").offset().top);
fixDiv(); //not sure if you need this.
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)