js获取div元素到顶部的距离 滚动条下拉窗口变化时加载CSS样式
2020-09-16 20:10:36 来源：夏易网络 评论：0 点击：
这种应用一般是当下拉滚动条时 让div 固定在页面某个位置 通过判断div元素到浏览器顶部的距离来添加或者移除class可以实现。
当浏览器窗口大小变化时 可以使用 window.onresize 请参考 《优酷视频、腾讯视频电脑手机浏览器自适应宽度高度的方法》
当浏览器窗口大小变化时 可以使用 window.onresize 请参考 《优酷视频、腾讯视频电脑手机浏览器自适应宽度高度的方法》
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.nnxiayi.com/myfile/js/jquery.js"></script>
<!--head先加载一个jquery.js-->
</head>
<body>
<div class="main" style=" height:200px"></div>
<dl id="bxpro" style=" height:200px; border:3px solid #ff0000;"></dl>
<script type="text/javascript">
$(window).scroll(function(){
//$(window).scroll 当滚动条滑动时执行
var bxpro = $("#bxpro").offset().top - $(window).scrollTop();
// $("#bxpro").offset().top 为#bxpro 到body的距离， $(window).scrollTop()为页面网上卷缩的距离
//两者相减得到div #bxpro 到浏览器顶部的距离
document.getElementById("bxpro").innerHTML=bxpro;
// 往div bxpro 里输入 #bxpro 到顶部的距离 滚动滑动时数字改变
bxpro<180?$("#bxpro").addClass("bxpro"):$("#bxpro").removeClass("bxpro");
//当#bxpro距离顶部小于180px时给#bxpro添加Class bxpro 反之移除class
}
);
</script>
<div class="main" style=" height:200px"></div>
</body>
</html>
