window.scrollY = current form the drop-down strip offset = $ (window) .scrollTop ()
obj.offsetTop = current element from the body from the top of the
So, you want to get away from the current element from the top of the browser = obj.offsetTop-window.scrollY;
Determine whether the browser bar drop-down in the end part:
1. The first thing to know is due to the pull-down bar browser viewable area height > height of the document did not emerge until
2. Browser visible area height : $ (window) .height () , height of the document: $ (Document) .height () , the pull-down bar top offset: $ (window) .scrollTop ()
3. The relationship between these three: the document height = amount above the drop-down bar has been offset + browser viewable area height + dropdown amount has not reached the bottom bar
4. If a pull-down bar reaches the bottom, i.e. the amount of pull-down has not yet reached the bottom bar = 0 , then it satisfies a relationship: Document height = amount above the drop-down bar has been offset + browser viewable area height, namely: $ (Document) .height () = $ (window) .scrollTop () + $ (window) .height () , the relationship is determined to only three.
Determining whether an element in the visible region:
As shown, in the element A and the element B between elements shall be in the visible region.
Two conditions are required: .. 1 $ (obj) .offsetTop () + $ (obj) .height ()> $ (window) .scrollTop () , close to the element A condition of
2. $ (Obj) .offsetTop <$ (window) .scrollTop () + $ (window) .height () , close to the element B conditions of
Attach a further embodiment the test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.wresize.js"></script>
<style>
label{
display:block;
}
</style>
</head>
<body style="height:100%;">
<div id="lbl">
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
<label>这是一个label</label>
</div>
<script>
var isFocusStrong = true;
var maxSize = 30;
var minSize = 12;
SetStrong();
$(window).resize(function () {
if (isFocusStrong) {
SetStrong();
}
});
$(window).scroll(function () {
var windowScrollTop = $(window).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
if (windowScrollTop + windowHeight == scrollHeight) {
}
else if (isFocusStrong) {
SetStrong();
}
});
function SetStrong() {
$.each($("label"), function (i, obj) {
var isVisible = false;
//元素距离文档顶部的距离
var objOffsetTop = obj.offsetTop;
//浏览器窗体下拉条偏移量
var windowScrollTop = $(window).scrollTop();
//可视区域的高度
var windowHeight = $(window).height();
if ((objOffsetTop + $(obj).height() > windowScrollTop) && (objOffsetTop < windowScrollTop + windowHeight)) {
isVisible = true;
}
if (isVisible) {
//元素距离可视区域顶端的距离
var top = objOffsetTop - windowScrollTop;
var p = top / windowHeight;
var size = (1 - Math.abs(p - 0.45)) * maxSize;
if (size < minSize) size = minSize;
$(obj).css("font-size", size + "px");
$(obj).text("($(window).scrollTop():" + windowScrollTop + ",top:" + top + ",obj.offsetTop:" + objOffsetTop + ",$(obj).height():" + $(obj).height() + ",isVisible:" + isVisible + ")");
}
else
{
$(obj).text("(isVisible:" + isVisible + ")");
}
});
};
// 获取页面可视区域高度、宽度
function getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else {
if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight
}
}
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}
function GetSize() {
$("#lbl").html(
"屏幕分辨率为：" + screen.width + "*" + screen.height
+ "<br />" +
"屏幕可用大小：" + screen.availWidth + "*" + screen.availHeight
+ "<br />" +
"网页可见区域宽：" + document.body.clientWidth
+ "<br />" +
"网页可见区域高：" + document.body.clientHeight
+ "<br />" +
"网页可见区域宽(包括边线的宽)：" + document.body.offsetWidth
+ "<br />" +
"网页可见区域高(包括边线的宽)：" + document.body.offsetHeight
+ "<br />" +
"网页正文全文宽：" + document.body.scrollWidth
+ "<br />" +
"网页正文全文高：" + document.body.scrollHeight
+ "<br />" +
"网页被卷去的高：" + document.body.scrollTop
+ "<br />" +
"网页被卷去的左：" + document.body.scrollLeft
+ "<br />" +
"网页正文部分上：" + window.screenTop
+ "<br />" +
"网页正文部分左：" + window.screenLeft
+ "<br />" +
"屏幕分辨率的高：" + window.screen.height
+ "<br />" +
"屏幕分辨率的宽：" + window.screen.width
+ "<br />" +
"屏幕可用工作区高度：" + window.screen.availHeight
+ "<br />" +
"屏幕可用工作区宽度：" + window.screen.availWidth
);
}
</script>
</body>
</html>