js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法


Posted in Javascript onAugust 11, 2015

本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法。分享给大家供大家参考。具体如下:

//控制logo的显示位置 Begin
window.addEventListener("resize", function () {
  // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度)
  changeLogoPosition();
}, false);
changeLogoPosition();
function changeLogoPosition() {
  var contentHeight = $("#main_content_div").css("height");
  var logoHeight = $("#third_party_logo").css("height");
  contentHeight = parseInt(contentHeight.replace('px', ''));
  logoHeight = parseInt(logoHeight.replace('px', ''));
  //alert('屏幕高度:'+document.body.scrollHeight+' 内容高度:'+contentHeight+' logo高度:'+logoHeight);
  if (document.body.scrollHeight - contentHeight > logoHeight) {
    document.getElementById('third_party_logo').style.position = 'absolute';
  } else {
    document.getElementById('third_party_logo').style.position = '';
  }
}
//控制logo的显示位置 End

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
jQuery选择器全面总结
Jan 06 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
JS中的phototype详解
Feb 04 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 #Javascript
JavaScript SHA512&SHA256加密算法详解
Aug 11 #Javascript
js中 javascript:void(0) 用法详解
Aug 11 #Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 #Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 #Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 #Javascript
高性能JavaScript DOM编程(1)
Aug 11 #Javascript
You might like
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php实现文章评论系统
2019/02/18 PHP
使用PHP反射机制来构造"CREATE TABLE"的sql语句
2019/03/21 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
<script defer> defer 是什么意思
2009/05/10 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
文史专业毕业生自荐信
2013/11/17 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
研讨会通知
2015/04/27 职场文书
爱国主题班会教案
2015/08/14 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
HDFS免重启挂载新磁盘
2022/04/06 Servers