<div style="width:500pxheight:200pxbackground-color:#F00position:fixedleft:100pxtop:200px" id="test">
<button onclick="document.getElementById('test').style.display='none'">关闭</button>
</div>
其中left和top都是相对于屏幕的位置
程序上给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控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下：很多人初学网页制作时在网页中加入一段背景音乐，听到音乐响起的那一刻往往都会有一丝的成就感。
这里就为大家讲解如何使用js控制背景音乐播放与停止。具体如下：
一、jquery控制背景音乐开关
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http//www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
//加载背景音乐，并自动播放
$('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />')
$('#bg_music_btn').click(function(){
var state = $('#bg_music_btn').attr('state')
if(state == '1')//
{
$('#bg_music_btn').attr('state','0')
$('#bg_music_btn').html('打开背景音乐')
$('#m_bg_music').remove()
}else if(state == '0')
{
$('#bg_music_btn').attr('state','1')
$('#m_bg_music').remove()
$('#bg_music_btn').html('关闭背景音乐')
$('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />')
}
})
</script>
</head>
<body>
<!--控制播放-->
<div id="bg_music_btn" state='1'>关闭背景音乐</div>
<!--背景音乐-->
<div id="bg_music"></div>
</body>
</html>
以上介绍了jquery如何控制背景音乐开关的方法，接下来再进一步扩展。
二、JQuery自动播放提示音
最早对网站有自动提示音的功能，发现在Discuz论坛中出现。但是它有一个问题就是只支持flash，不支持HTML5，不明确最新版本中是否支持HTML5。
对于Discuz 7.2 版本中，提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3，然后使用如下脚本来实现:
复制代码 代码如下:
<div id="soundplayerlayer" style="position:absolutetop:-100000px"></div>
<script type="text/javascript" reload="1">
function soundplayer(file) {
$('soundplayerlayer').innerHTML = AC_FL_RunContent('id', 'pmsoundplayer', 'name', 'pmsoundplayer', 'width', '0′, 'height', '0′, 'src', '{$boardurl}images/sound/player.swf', 'FlashVars', 'sFile={$boardurl}images/sound/pm_' + file + '.mp3′, 'menu', 'false', 'allowScriptAccess', 'sameDomain', 'swLiveConnect', 'true')
}
</script>
可惜这个方法局限在flash，在苹果设备上可能就会遇到麻烦了。
HTML5开源播放器JPlayer支持自动播放提示音
JPlayer支持play事件触发自动播放提示音。
1. 装载JPlayer到一个div层，例如#jplayer。
复制代码 代码如下:
$(function() {
$("#jplayer").jPlayer({
swfPath: "http//www.jplayer.org/latest/js/Jplayer.swf",
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "./resources/message.mp3"
})
},
supplied: "mp3"
})
})
body部分加入:<div id="jplayer"></div>
装载JQuery完成后，jplayer的div内容在支持swf的浏览器内变成:
复制代码 代码如下:
<div id="jplayer" style="width: 0pxheight: 0px"><img id="jp_poster_0" style="width: 0pxheight: 0pxdisplay: none"><object height="1" width="1" id="jp_flash_0" data="http//www.jplayer.org/latest/js/Jplayer.swf" type="application/x-shockwave-flash" style="width: 0pxheight: 0px"><param name="flashvars" value="jQuery=jQuery&id=jplayer&vol=0.8&muted=false"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#000000"><param name="wmode" value="opaque"></object></div>
在支持HTML5的浏览器内变成:
复制代码 代码如下:
<div id="jplayer" style="width: 0pxheight: 0px"><img id="jp_poster_0" style="width: 0pxheight: 0pxdisplay: none"><audio id="jp_audio_0" preload="metadata" src="./resources/message.mp3"></audio></div>
完成装载后就是触发播放的事件了。
2. 触发播放提示音事件
复制代码 代码如下:
$("#jplayer").jPlayer('play')
3. 循环播放函数，每5秒播放一次提示音
复制代码 代码如下:
function PlaySound() {
$("#jplayer").jPlayer('play')
setInterval("PlaySound()", 5000)
return true
}
附录:
1. 解决无法自动播放提示音的问题
如果在加载JQplayer后，立刻运行播放的触发事件，没有任何效果!具体是什么原因我也不太清楚，估计是因为音频文件没有加载上。
2. 解决方法是让触发事件等待5秒中执行。
复制代码 代码如下:
setTimeout("$('#jplayer').jPlayer('play')", 5000)
加载完页面，5秒后自动播放提示音。
