调整浏览器大小时重置css或脚本 [英] Reset css or script when browser is resized

问题描述

这可能很难解释，但是说我的浏览器大小与图1中一样小。底部文本位于应该出现的位置，并且当我向下滚动脚本时激活。

编辑 https://jsfiddle.net/j4f53rds/1/

 函数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'}）; 
 
 
 $ b $（＃nav_color）。data（top，$（＃nav_color）。offset（）。top）; 
 $（window）.scroll（fixDiv）; 
  

当用户滚动时，该脚本会使底部的文本固定在html的顶部下。现在问题来了。发射后，如果我调整浏览器的大小，请说出全屏，如图二，然后向上滚动。文本不会重新定位到新位置，它会重置回到较小浏览器中的原始位置。

如何让脚本在用户滚动备份时考虑新的浏览器大小？ .com / R0Lk3.jpgalt =在这里输入图片描述>

解决方案

问题在于，当页面处于顶部时，加载，但是当窗口大小调整时，该位置会改变。试试这个：

$ $ p $ $（$）$（$＃$）$（$＃$） data（top，$（＃nav_color）。offset（）。top）;
fixDiv（）; //不知道你是否需要这个。

This might be hard to explain but say my browser size is small like in image 1. The bottom text is positioned where it should be and when I scroll down a script activates.

EDIT 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);

The script causes the text on the bottom to become fixed on the top of the html as the user scrolls down. Now here comes the issue. After firing, if I resize the browser, say make it full screen, like in image two, and then scroll back up. The text doesn't reposition to it's would be new location, it resets back to the original position in the smaller browser. How do I get the script to take into account a new browser size when the user scrolls back up?

解决方案

The problem is that you are saving off the top position when the page loads, but that position changes when the window is resized. Try this:

$(window).resize(function() {
    $("#nav_color").data("top", $("#nav_color").offset().top); 
    fixDiv(); //not sure if you need this.
});

这篇关于调整浏览器大小时重置css或脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！