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

JavaScript041

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

给个简单的 也需引入jquery

Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function(){

$('#showWin').click(showWin)

function showWin(){

$('#floatWin').show('slow')

}

})

</script>

</head>

<body>

<button id="showWin">显示窗口</button>

<div id="floatWin"

style="right:0pxbottom:0pxdisplay:nonewidth: 200pxheight: 200pxbackground-color: #ccccccposition: absolute">

</div>

</body>

</html>

最近项目里正好有类似需求 代码给出来供你研究下 需要jQuery支持

有什么疑问可以hi我

(function(){

$(function(){

$.ajax({

url: messagePath+'messageBox.do',

// dataType:'json',

success:function(json){

alert(json)

showMessages(json)

}

})

})

function showMessages(json){

if(json.messagecount>0){

var messageBox ="<div id=\"OTOS_MESSAGEBOX_CONTAINER\">"+

" <table id=\"OTOS_MESSAGEBOX_HEADER\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">"+

" <tr>"+

" <td id=\"OTOS_MESSAGEBOX_HEADER_TEXT\"></td>"+

" <td align=\"right\" width=\"20\"><img id=\"OTOS_MESSAGEBOX_CLOSE\" style=\"cursor: pointer\" src=\"resources/images/close.gif\"></td>"+

" </tr>"+

" </table>"+

" <table id=\"OTOS_MESSAGEBOX_CONTEXT_TITLE_TABLE\" width=\"100%\">"+

" <tr id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER\">"+

" <td>标题</td>"+

" <td width=\"50\">类型</td>"+

" <td width=\"40\">发送人</td>"+

" </tr>"+

" </table>"+

" <div id=\"OTOS_MESSAGEBOX_CONTEXT\">"+

" <table id=\"OTOS_MESSAGEBOX_CONTEXT_TABLE\" width=\"100%\"></table>"+

" </div>"+

"</div>"

$('body').append(messageBox)

// $('#OTOS_MESSAGEBOX_CONTAINER').jqDrag("#OTOS_MESSAGEBOX_HEADER")

$('#OTOS_MESSAGEBOX_HEADER_TEXT').text("您有"+json.messagecount+"条未读消息!")

$('#OTOS_MESSAGEBOX_CLOSE').bind('click',closeMessageBox)

$('#OTOS_MESSAGEBOX_CONTAINER').show('slow')

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

var map = json.list[i]

$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').append("<tr onClick=\"toViewMessage("+map.id+",+"+map.mid+")\" class=\"OTOS_MESSAGEBOX_CONTEXT_TABLE_TR\"><td>"+cutTitle(map.title)+"</td><td width=\"50\" nowarp>"+map.type+"</td><td width=\"40\">"+map.sender+"</td></tr>")

}

$('#OTOS_MESSAGEBOX_CONTEXT_TABLE').verticalRoll({parentid:'OTOS_MESSAGEBOX_CONTEXT'})

}

}

// 纵向滚动

$.fn.verticalRoll = function(options) {

var opts = $.extend({}, $.fn.verticalRoll.defaults, options)

if(!opts.parentid||$('#'+opts.parentid).size()<1){

alert('父级不存在')

return false

}

var $p = $('#'+opts.parentid)

var $t = $(this)

if($t.attr('tagName')!='TABLE'){

alert('不是table')

return false

}

var s = $t.find('tr').size()

$p.css('overflow','hidden')

$t.css('position','absolute')

if(s>5){

window.setInterval(function(){

var temp = $t.find('tr:first')

temp.fadeOut('slow',function(){

$t.append(temp)

temp.show()

})

},2000)

}else{

return false

}

$.fn.verticalRoll.defaults = {}

}

})(jQuery)

function closeMessageBox(){

$('#OTOS_MESSAGEBOX_CONTAINER').hide('slow')

$('#OTOS_MESSAGEBOX_CONTAINER').fadeOut()

}

function cutTitle(title){

var temp

if(title.length>8){

temp = title.substring(0,8)+"..."

return temp

}else{

return title

}

}

function toViewMessage(id,rid){

window.location.href = "messagesUserList.do?id="+id+"&rid="+rid

}

Css文件

@CHARSET "UTF-8"

#OTOS_MESSAGEBOX_CONTAINER {

position: absolute

width: 240px

height: 145px

border: 1px solid #81b8ff

background-color: #deecfd

right: 0px

bottom: 0px

overflow:hidden

display: none

}

#OTOS_MESSAGEBOX_CONTAINER TD{

white-space: nowrap

overflow: hidden

height: 18px

}

#OTOS_MESSAGEBOX_HEADER {

cursor: move

border-bottom: 1px solid #81b8ff

background-color: #9ACDFE

overflow:hidden

}

#OTOS_MESSAGEBOX_HEADER td {

padding: 2px

color: #ffffff

overflow:hidden

}

#OTOS_MESSAGEBOX_CONTEXT {

position: relative

height: 102px

overflow:hidden

}

#OTOS_MESSAGEBOX_CONTEXT td{

white-space: nowrap

overflow: hidden

}

#OTOS_MESSAGEBOX_HEADER_TEXT {

font-weight: bold

overflow:hidden

}

#OTOS_MESSAGEBOX_FOOTER {

position: relative

bottom: 0px

padding-right: 2px

text-align: right

overflow:hidden

}

.OTOS_MESSAGEBOX_CONTEXT_TABLE_TR{

cursor:pointer

color: #336699

overflow:hidden

}

#OTOS_MESSAGEBOX_CONTEXT_TABLE_HEADER td{

overflow:hidden

font-weight: bold

overflow:hidden

}

复制粘贴我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

*{margin:0}

body{

height:1000px

width:1000px

}

#a{

width:300px

height:100px

background:red

}

</style>

<script>

var isie6 = window.XMLHttpRequest?false:true

window.onload = function(){

var a = document.getElementById('a')

var d = document.getElementById('d')

if(isie6){

a.style.position = 'absolute'

window.onscroll = function(){

d.innerHTML = ''

}

}else{

a.style.position = 'fixed'

}

a.style.left= '0'

a.style.bottom = '0'

}

</script>

</head>

<body>

<div id ="d" style="display:none">rgrrrrrrrr</div>

<div id='a'>test</div>

</body>

</html>

若是效果不是你想要的，我还可以给你写，到你满意为止。