皇冠电子游戏登录

皇冠电子游戏登录网络

您的当前位置:首页 > 皇冠电子游戏登录动态 > 网站建设学堂 >

js获取div元素到顶部的距离 滚动条下拉窗口变化时加载CSS样式

2020-09-16 20:10:36   来源:皇冠电子游戏登录网络   评论:0 点击:
这种应用一般是当下拉滚动条时 让div 固定在页面某个位置  通过判断div元素到浏览器顶部的距离来添加或者移除class可以实现。

当浏览器窗口大小变化时 可以使用 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="/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>

 

皇冠电子游戏登录动态
网站建设学堂
网站优化学堂
网络行业皇冠电子游戏登录
皇冠电子游戏登录网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?
  • 网建
  • 优化
  • 资讯
  • 案列
  • 客服 有事点这里 有事点这里