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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js和jquery如何获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 1 复制代码 代码如下: .news img{margin:5px auto; display:block;width:100%; height:auto;} 但是这种方式有另外

  • js 获取浏览器高度和宽度值(多浏览器)

    js 获取浏览器高度和宽度值(多浏览器)

     IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.

  • JS和jquery获取各种屏幕的宽度和高度的代码

    Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高

  • 获取JS中网页各种高宽与位置的方法总结

    获取JS中网页各种高宽与位置的方法总结

    screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window对象 获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.i

  • js获取div高度的代码

    <style type="text/css"> <!-- #top {     color: #FFFFFF;     background-color: #FF0000;     text-align: left;     text-indent: 24px;     width: 780px;     line-height: 24px;     font-size: 12px;     padding-right: 10px;     padding-left:

  • javascript窗口宽高,鼠标位置,滚动高度(详细解析)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • js获取网页高度(详细整理)

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高: document.b

  • javascript 获取页面的高度及滚动条的位置的代码

    复制代码 代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window.innerHeight || document.documentElement &

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

    本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten

  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel

  • 使用vue控制元素显示隐藏方式

    目录 vue控制元素显示隐藏 解释 注意点 控制元素显示隐藏 v-show与v-if,以及v-if-else v-show与v-if作用 vue控制元素显示隐藏 HTML代码:  <div title="意向价格"   v-if="showPrise"></div>   <div title="意向租金"   v-show="showRentPrise"></div> JS代码:

  • React控制元素显示隐藏的三种方法小结

    目录 React控制元素显示隐藏的方法 方法一 方法二 方法三 React切换显示和隐藏 总结 React控制元素显示隐藏的方法 React控制元素显示和隐藏的方法目前我知道的有三种方法: 第一种是通过state变量来控制是否渲染元素,类似vue中的v-if. 第二种是通过style控制display属性,类似vue 中的v-show. 第三种是通过动态切换className. 方法一 第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为false,内容是直接不

  • Android如何监听屏幕旋转

    Android如何监听屏幕旋转

    背景 关于个人,前段时间由于业务太忙,所以一直没有来得及思考并且沉淀点东西:同时组内一个个都在业务上能有自己的思考和总结,在这样的氛围下,不由自主的驱使周末开始写点东西,希望自己除了日常忙于业务,可以沉淀点东西,加上自己的成长.. 关于切入点,最近在做应⽤内悬浮球功能时,需要监听屏幕旋转事件来对悬浮球的位置进⾏调整,发现有些情况下并不能收到系统回调,思考了⼀翻,做了⼀个屏幕旋转的模拟监听,基本上能达到⽬的. 问题 悬浮球在停⽌拖拽后,需要贴边到⼿机屏幕的左右两侧. 在竖屏状态下,x坐标为0即为左

  • 两种js监听滚轮事件的实现方法

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.Jquery通过$(

  • Android 监听屏幕是否锁屏的实例代码

    今天,简单讲讲如何监听手机屏幕是否锁屏. 实现方法: 1)通过BroadcastReceiver接收广播Intent.ACTION_SCREEN_ON和Intent.ACTION_SCREEN_OFF可以判断屏幕状态是否锁屏,但是只有屏幕状态发生改变时才会发出广播: 2)如果要在屏幕状态发生改变之前就想获取屏幕状态,可以通过反射机制调用PowerManager的isScreenOn方法 . 具体实现,见代码: 直接上代码: 1.定义一个接收广播的类 package com.app.lib; im

  • vue 监听屏幕高度的实例

    项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把window.onresize事件挂在到mounted mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.docum

  • Android PhoneWindowManager监听屏幕右侧向左滑动实现返回功能

    由于项目没有设计返回键,一旦进入别的应用,就无法回到桌面.只能通过串口输入input keyevent 4(返回键)来返回桌面,为了方便调试,在Framework 中监听手势,实现返回功能. 在frameworks\base\services\core\java\com\android\server\policy\PhoneWindowManager中有这么一段代码 mSystemGestures = new SystemGesturesPointerEventListener(context,

  • js实现无刷新监听URL的变化示例代码详解

    无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

随机推荐