滚动时自适应多屏幕的Logo尺寸调整方案求助

核心思路 #

要实现跨屏幕适配，不能用固定除数（比如原代码里的scroll/1.128），而是要基于滚动距离与窗口高度的比例计算缩放。因为需求是滚动到窗口高度的元素（.dataHeight）前缩至最小尺寸，所以滚动阈值就是窗口高度，用滚动距离占窗口高度的百分比线性调整Logo尺寸，适配所有屏幕。

关键计算公式 #

定义固定参数：

• originalWidth：Logo初始宽度（1024px）
• originalHeight：Logo初始高度（223px）
• minWidth：Logo最小宽度（308px）
• minHeight：Logo最小高度（64px）
• windowHeight：当前窗口高度（window.innerHeight）
• scrollY：当前滚动距离（window.scrollY）

缩放逻辑：

// 计算滚动比例（0~1，滚动到窗口高度时比例为1）
const scrollRatio = Math.min(scrollY / windowHeight, 1);

// 线性计算当前宽高：从初始尺寸向最小尺寸平滑过渡
const newWidth = originalWidth - (originalWidth - minWidth) * scrollRatio;
const newHeight = originalHeight - (originalHeight - minHeight) * scrollRatio;

滚动距离每增加窗口高度的1%，Logo就从初始尺寸向最小尺寸缩小1%，滚动到窗口高度时刚好达到最小尺寸。

修改后的完整代码 #

JavaScript（script.js）

// 固定参数，方便后续维护
const originalWidth = 1024;
const originalHeight = 223;
const minWidth = 308;
const minHeight = 64;
let windowHeight = window.innerHeight;

// 监听窗口尺寸变化，实时更新窗口高度
window.addEventListener('resize', () => {
  windowHeight = window.innerHeight;
});

// 防抖处理，减少scroll事件触发频率，优化性能
let scrollTimeout;
$(window).scroll(function() {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    const scrollY = window.scrollY;
    const scrollRatio = Math.min(scrollY / windowHeight, 1);

    let newWidth = originalWidth - (originalWidth - minWidth) * scrollRatio;
    let newHeight = originalHeight - (originalHeight - minHeight) * scrollRatio;

    // 兜底：确保宽高不会小于最小值
    newWidth = Math.max(newWidth, minWidth);
    newHeight = Math.max(newHeight, minHeight);

    $('.navbar-brand img').css({
      width: `${newWidth}px`,
      height: `${newHeight}px`
    });
  }, 10);
});

HTML

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="home">
        <nav class="navbar navbar-expand-lg fixed-top">
            <div class="container-fluid">
                <a href="#home" class="navbar-brand fixed-top" id="navbar-brand">
                    <img id="cover-image" src="RECMAN-header.png" title="home">
                </a>
            </div>
        </nav>
        <div class="dataHeight"></div>
    </div>

    <!-- 滚动到此处前Logo已缩至最小尺寸 -->

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS（style.css）

.navbar-brand{
    width: 0;
    padding-top: 2px;
    padding-left: .5%;
}
body{
    height:2000px;  
}
.dataHeight{
    height: 100vh;
    background-color:lightblue;
}

/* 可选：添加过渡动画，让缩放更平滑自然 */
#cover-image {
    transition: width 0.1s ease, height 0.1s ease;
}

额外优化说明 #

1. 窗口resize监听：窗口大小变化后自动更新高度参数，保证适配性。
2. 防抖处理：降低scroll事件触发频率，避免页面卡顿。
3. 平滑过渡：通过CSS过渡动画让缩放过程更流畅。

内容的提问来源于stack exchange，提问作者h one Rua M