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

最新推荐文章于 2024-03-26 18:57:06 发布
最新推荐文章于 2024-03-26 18:57:06 发布
阅读量1.3w 收藏 1
点赞数 1
分类专栏： WEB前端 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dannywj1371/article/details/41868329
版权 
//控制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

dannywj1371
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
10-23
主要介绍了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法,涉及javascript针对页面元素及样式属性的相关操作技巧,需要的朋友可以参考下
用JS控制Iframe自动适应页面的高度
追逐梦想
01-20 1376
JavaScript代码：    function autoResize() //自动调整框架高度        {        　try        　{        　　document.all["ulistLeft"].style.height=ulistLeft.document.body.scrollHeight;        　}        　catch(e){
vue如何实现实时监听页面宽度高度变化
最新发布
aaa123aaasqw的博客
03-26 571
话不多说直接上代码，自行研究。
js调整浏览器窗口大小
qingmengwuhen1的博客
04-23 1万+
项目js代码： $(window).resize(function() { $('#data-list').height($(window).height() - $('#data-list').offset().top - 50) }); $(window).height():  获得当前窗口的高度。 $('#data-list').offset().top:  获得id为data-li
JavaScript如何获得浏览器的宽高
z13903931414的博客
01-07 385
属性获取浏览器窗口的宽度和高度，并将结果输出到控制台中。你可以将这个代码放在一个HTML文件中，并在浏览器中打开该文件，然后单击按钮来查看窗口的宽度和高度。属性来获取浏览器窗口的宽度和高度。在这个示例中，我们创建了一个按钮，当用户单击该按钮时，会触发。在JavaScript中，你可以使用。
javascript取窗口的可视高度和页面的内容高度 兼容所有浏览器
weixin_30885111的博客
06-18 122
用javascript在不同的浏览器中取窗口的可视高度和页面的内容高度是个烦心的事，所用的html标准不同、页面的内容高度是否超过窗口的可视高度都会对取值产生影响，所用到的取值方法也不同。 一、取窗口的可视高度（即浏览器的上面的工具栏到下面的状态栏之间的高度） 1、IE中的取法 document.getElementsByTagName("html")[0].offsetHeight;...
如何监听div高度变化
weixin_35752122的博客
02-13 1525
要监听 div 高度的变化，你可以使用 JavaScript 监听它的 offsetHeight 属性，该属性会返回 div 元素的当前高度。你可以通过下面的代码实现： const div = document.querySelector("#myDiv"); let previousHeight = div.offsetHeight; setInterval(function() { c...
监听div元素高度变化的方案
weixin_42287935的博客
10-11 727
width: 0;</</
动态监听DOM元素高度变化
趣谈前端
06-17 711
大厂技术坚持周更精选好文1、背景考虑这样一种情况，产品同学希望达到以下功能：在我们的网页中有一个固定区域，这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串。他需要在内容不超过一个最大高度的时候完全显示所有内容，超过最大内容后仅展示最大高度范围内的内容，超出部分隐藏，并通过一个按钮 “展示更多” 来给用户展示更多的选择。在这看似简单的需求当中，其实涉及到了...
js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
weixin_33705384的博客
06-03 1万+
原理：通过监听窗口的变化来动态获取窗口大小用到的方法：addEventListener() 监听window的resize事件js代码：// 定义事件侦听器函数function watchWindowSize() {// 获取窗口的宽度和高度，不包括滚动条var w = document.documentElement.clientWidth;var h = document.documentEl...
vue实现某元素吸顶或固定位置显示（监听滚动事件）
08-28
主要为大家详细介绍了vue实现某元素吸顶或固定位置显示，监听滚动事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js动态移动页面元素，以及悬停事件关联实例
09-09
1、支持自定义扩展，直接可以使用 2、脚本保存在scripts文件夹内，可以直接使用
vue 监听屏幕高度的实例
10-18
今天小编就为大家分享一篇vue 监听屏幕高度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript监听一个DOM元素大小变化
10-15
主要介绍了JavaScript监听一个DOM元素大小变化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
监测div大小变化_js监听div元素的宽高变化
weixin_39524959的博客
12-21 5060
一、js监听window变化的方法1、onsize只能监听window对象的变化(1)、 window对象原生、jQuery方法//原生写法window.onsize = function(){console.log("11");}//jquery写法$(window).resize(function(){console.log("22");})//注意：浏览器窗口大小改变时，这段代码会执行多次，...
JS数组改变元素位置（互换、置顶、上移、下移）
qq_19249021的博客
06-24 1万+
本章回顾一下Javascript的一些操作方法。 数组方法 主要用到以下几个知识点，简单介绍一下 unshift() 可以向数组开头添加一个或多个元素，返回数组新长度。(改变原数组) shift() 删除数组开头第一个元素，返回被删除元素的值。(改变原数组) splice() 可删除从index处开始的零或多个元素，并且用参数列表中声明的一个或多个值来替换被删除的元素。(改变原数组) 1. 数组元素换位置 function swapArr(arr, arg1, arg2) { arr[arg.
JavaScript 中监听 div 高度的变化
hongtoushan的博客
11-08 4473
实现功能描述： 基于 vue + elementUI，在 Dialog 中有一个 Select 选择器，当 Select 的下拉列表显示时，要求高度能够撑开 Dialog。实现效果如图： 实现 实际项目代码结构稍微复杂，在这只说重点 A 组件伪代码： <template> <div> ... <el-dialog title="提示" :visible.sync="dialogVisible" size="mini"
监听页面元素宽高发生改变 resize
qq_37730779的博客
03-23 4157
监听浏览器窗口发生改变时： $(window).resize(function() { 你要执行的函数 }); 监听页面元素宽高发生改变时： (function($, h, c) {       var a = $([]), e = $.resize = .extend(.extend(.extend(.resize, {}), i, k = “setTimeout”...
基于jquery的监听某个元素高度变化resize事件
热门推荐
劲枫的博客
05-10 1万+
//一个jquery的插件，用于监听元素宽度高度变化，调用方式： //$("classname").bind('resize',function(){ //callback //... //... //}); (function ($, window, undefined) { var...
vue监听dom元素高度变化
06-09
要在 Vue 中监听 DOM 元素高度的变化，您可以使用 Vue 的 `$nextTick` 方法和 `Intersection Observer API`。 首先，在模板中，您需要使用一个具有固定高度的外层元素包裹您要监听高度变化的元素，例如： ```html <template> <div class="container"> <div class="content" ref="myContent"></div> </div> </template> <style> .container { height: 200px; overflow: auto; } .content { height: 400px; } </style> ``` 上面的代码中，我们在外层使用了一个具有固定高度和滚动条的容器，并在内部添加了一个高度为 400px 的 `<div>` 元素。 接下来，在 Vue 实例中，您需要通过 `$refs` 来获取要监听高度变化的元素，并使用 `Intersection Observer API` 来监听该元素的变化，例如： ```js export default { mounted() { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.$nextTick(() => { console.log(this.$refs.myContent.clientHeight) }); } }); }); observer.observe(this.$refs.myContent); } } ``` 上面的代码中，我们在 Vue 实例的 `mounted` 生命周期钩子中创建了一个 `IntersectionObserver`，并通过 `$refs` 获取了要监听高度变化的元素。然后，我们使用 `IntersectionObserver` 监听该元素的变化，并在元素进入视口时，使用 `$nextTick` 方法获取元素的新高度，并打印到控制台中。 需要注意的是，`$nextTick` 方法会在 DOM 更新后执行回调函数，以确保获取到的元素高度是最新的。这是因为 Vue 的更新是异步的，在修改 DOM 后，您无法立即获取到最新的 DOM 元素高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值