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

最新推荐文章于 2025-06-18 09:00:05 发布

dannywj1371

最新推荐文章于 2025-06-18 09:00:05 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端 JavaScript

本文链接：https://blog.youkuaiyun.com/dannywj1371/article/details/41868329

JavaScript 同时被 2 个专栏收录

84 篇文章

订阅专栏

WEB前端

36 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的动态调整页面Logo位置的方法。通过监听窗口大小变化事件并计算页面内容高度与Logo高度之间的关系，来决定Logo是否采用绝对定位。这有助于确保Logo在不同分辨率和窗口大小下都能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//控制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