js如何判断滚动到某个DIV时候,悬浮广告出现

JavaScript014

js如何判断滚动到某个DIV时候,悬浮广告出现,第1张

程序上给body或documentElement的scrollLeft、scrollTop赋值,

浏览器在没有出滚动条时,赋值后该值不会发生变化,始终是0。

下面是示例,该检测方法,不仅可以检测页面滚动条,传入要检测的节点,一样可以得到想要的结果。

代码(给scrollLeft,scrollTop赋负数值时会报错,此外scrollLeft,scrollTop的值不能大于实际最大的滚动值):

复制代码代码示例:

var isScroll = function (el) {

// test targets

var elems = el ? [el] : [document.documentElement, document.body]

var scrollX = false, scrollY = false

for (var i = 0i <elems.lengthi++) {

var o = elems[i]

// test horizontal

var sl = o.scrollLeft

o.scrollLeft += (sl >0) ? -1 : 1

o.scrollLeft !== sl &&(scrollX = scrollX || true)

o.scrollLeft = sl

// test vertical

var st = o.scrollTop

o.scrollTop += (st >0) ? -1 : 1

o.scrollTop !== st &&(scrollY = scrollY || true)

o.scrollTop = st

}

// ret

return {

scrollX: scrollX,

scrollY: scrollY

}

}

第二部分,jquery判断滚动条到底部并加载数据的方法。js滚动条回到顶部示例代码 js 页面刷新记住滚动条位置的方法 js动态隐藏滚动条(兼容多浏览器 IE FF等)

有些浏览器下会出现累计执行、重复执行的情况,可以在准备执行前和执行完毕加一个执行完毕的标记,当判断上一次执行完毕,再执行该次操作。

复制代码代码示例:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>jQuery实现当拉动滚动条到底部加载数据</title>

<style type="text/css">

*{margin:0padding:0}

body{font-size:14pxcolor:#444font-family:"微软雅黑",Arialbackground:#fff}

a{color:#444text-decoration: none}

a:hover{color:#065BC2text-decoration: none}

.clear{clear:both}

img{border:nonevertical-align: middle}

ul{list-style: none}

</style>

</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript">

//首先,窗口绑定事件scroll

$(window).bind("scroll",function() {

// 判断窗口的滚动条是否接近页面底部,这里的20可以自定义

if ($(document).scrollTop() + $(window).height() >$(document).height() - 20) {

//没有写ajax的调用,直接触发了链接的click事件。

$("#container").append('<div style="height:500px">dd</div>')

} // www.jbxue.com

})

</script>

</head>

<body>

<div id="container">

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>

</div>

</body>

</html>

另外,此下拉到最后,浏览器会记住当前滚动条位置,会在刷新页面后,直接执行操作,所以在刷新页面时要执行,滚动条到顶部的操作。

复制代码代码示例:

<script>

$(document).ready(function(){

$('body,html').animate({scrollTop:0})

})

</script>

在jQuery中获取浏览器窗口的尺寸信息

在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码:

$(window).height()  //浏览器时下窗口可视区域高度

$(document).height()//浏览器时下窗口文档的高度

$(document.body).height()//浏览器时下窗口文档body的高度

$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin

$(window).width()  //浏览器时下窗口可视区域宽度

$(document).width()//浏览器时下窗口文档对于象宽度

$(document.body).width()//浏览器时下窗口文档body的高度

$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding margin

<div style="width:100%height:100pxposition:fixed">

<button onclick="this.parentNode.parentNode.removeChild(this.parentNode)">关闭</button>

</div>