Question

我有一个固定定位的全屏图片库。容器div高度是通过jQuery设置的，下一个div（#page）的margin-top等于window.height。

以下是此代码：

var windowH = $(window).height();
var windowW = $(window).width();

function marginTop() {
    var currentH = $(window).height();
    $("#page").css("margin-top", currentH +'px');
    $("#image-gallery").css("height", currentH +'px');
    console.log('mTop fired!');
};

$(window).resize(function() {
        var newH = $(window).height();     // Records new windows height after resize
        var newW = $(window).width();
        var maxH = windowH + 90;        // Sets a positive delta of some px
        var maxW = windowW + 60;
        var minH = windowH - 90;      // Sets a negative delta of some px
        var minW = windowW - 60;
            if(newH > maxH) {           // If the height difference is more than 50px, then set new marginTop for #page
                marginTop();
                console.log('fire for bigger height');
            } else if(newH < minH) {
                marginTop();
                console.log('fire for smaller height');
            } else if(newW > maxW) {
                marginTop();
                console.log('fire for bigger width');
            } else if(newW < minW ) {
                marginTop();
                console.log('fire for smaller width');
            }
});

我已经在几个else if声明中分割了条件，因为它没有正常工作，我必须检查它何时工作，何时不能。

各种if ... elseif ... elseif ...在移动浏览器上解决问题：没有该delta，＃image-gallery div会在地址栏出现或消失时改变尺寸，导致口吃调整div的高度。而且，我也不想重新绘制整个东西，以便在桌面上的视口中进行小的更改。

然而，它有一些问题，因为它没有正常工作。特别是：

marginTop（）仅针对较小高度的window.resize触发（从console.log检查）
在桌面上，如果通过右上角按钮调整窗口大小，则根本不会触发。
删除所有if-else-if条件，在任何情况下都可以在桌面上正常工作（但地址栏仍然是移动设备上的问题）

无法弄明白，代码对我来说似乎不错，但对浏览器却没有。捕获的地方在哪里？

在Firefox和Chrome上测试最新

Answer 1

有人过去然后在我的问题上投了-1。我只想知道在没有发表简单评论的情况下判断其他人的勇敢的人是谁。这种行为应该是禁止的，我们不是9gag也不是4chan。

Answer 2

这里有很多小问题。您的if语句将永远不会达到宽度比较。首先，如果宽度在if else的高度，则始终首先评估高度，如果调整高度，则永远不会触及宽度。

接下来，var windowH = $(window).height();处的“当前高度|宽度”永远不会重置。这意味着，如果用户显示的视口（例如浏览器最小化）为200：150，则高度：宽度将始终基于200：150进行测量。这将使得使用更大视口的人获得非常不同的体验。

通常在窗口重新调整大小时发现的另一个问题是代码触发的次数。这可能导致重叠命令的主要问题，从而导致双重反馈。

以下是我将如何处理此建议以及建议的重建。

/*	simple method to get the current window size as an object where h=height && w=width	*/
function getWindowSize() {
	return { h: $(window).height(), w: $(window).width() };
}

function doWork(typ, msg) {
	//	report msg of change to console
	console.log(typ == 'h' ? 'HEIGHT:\t' : 'WIDTH:\t', msg);
	
	//	we really only need fire your method if height has changed
	if (typ == 'h') marginTop();
	
	//	a change was made, now to reset 
	window.sizeCheck = getWindowSize();
}

//	your original method
//	brokered off so it can be used independently 
function marginTop() {
	var currentH = $(window).height();
	console.log('currentH', currentH)
	$("#page").css("margin-top", currentH +'px');
	$("#image-gallery, #page").height(currentH);
	console.log('mTop fired!');
}

/*	action area for window resize event	*/
function windowResize() {
	//	made my variables short and sweet,
	//	sch=sizeCheck, scu=sizeCurrent
	var sch = window.sizeCheck,	//	get previously set size
		scu = getWindowSize(),
		maxH = sch.h + 90,
		minH = sch.h - 90,
		maxW = sch.w + 60,
		minW = sch.w - 60;
	
	if (scu.h > maxH) doWork('h', 'View Got <b>Taller</b>');
	else if (scu.h < minH) doWork('h', 'View Got <i>shorteR</i>');
	
	//	for what you want, the following isn't even really nec
	//	but i'll leave it in so you can see the work
	if (scu.w > maxW) doWork('w', 'View Got <b>Wider</b>');
	else if (scu.w < minW) doWork('w', 'View Got <i>thinneR</i>');
}

$(function() {
	//	ezier to maintain one global variable than to scope 
	//	shot 2 which could easily be overriden in a latter method, 
	//	by simple confusion
	window.sizeCheck = getWindowSize();
	
	//	call of event to establish correct margin for the page div
	marginTop()
	
	$(window).resize(function(e) {
		//	this will clear our timer everytime resize is called
		if (this.tmrResize) clearTimeout(this.tmrResize);
		//	resize is called multiple times per second, 
		//	this helps to seperate the call,
		//	and ensure a little time gap (1/4 second here)
		this.tmrResize = setTimeout(windowResize, 250);
	});
})

html, body { margin: 0; padding: 0; }
#image-gallery {
	background: blue;
	color: white;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#page { background: white; color: red; height: 400px; position: relative; z-index: 1; }
p { padding: 3em; text-align: center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-gallery">
	<p>
		image Gallery
	</p>
</div>
<div id="page">
	<p>
		next page
	</p>
</div>

$（window）.resize在高度/宽度条件下没有正确触发功能

2 个答案: