页面滚动过header高度后如何将隐藏图片设置为display:flex显示

你可以通过JavaScript监听页面滚动事件，判断滚动距离超过jumbotron区域高度时修改图片的display属性即可实现需求，完整修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

    <!-- header start -->
    <div class="container-fluid">
        <div class="jumbotron">
            <h1>Header area</h1>
        </div>
    </div>
    <!-- header end -->

    <!-- Your page contant start -->
    <div class="container-fluid">
        <div class="alert alert-primary" style="height: 800px;">
            <h1>Your page contant area</h1>
            <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="myContent">
        </div>
    </div>
    <!-- Your page contant end -->

<style>
    #myContent{
        display: none;
    }
</style>
<script>
// 获取对应DOM元素
const jumbotronEl = document.querySelector('.jumbotron')
const imgEl = document.getElementById('myContent')

window.addEventListener('scroll', () => {
    // 获取当前页面垂直滚动距离，兼容不同浏览器
    const scrollDistance = window.scrollY || document.documentElement.scrollTop
    // 获取jumbotron区域的总高度（包含内边距、边框）
    const headerHeight = jumbotronEl.offsetHeight
    // 滚动距离大于等于jumbotron高度时显示图片
    if(scrollDistance >= headerHeight) {
        imgEl.style.display = 'flex'
    } else {
        // 不需要回滚隐藏时可删除当前else分支
        imgEl.style.display = 'none'
    }
})
</script>
</body>
</html>

补充说明 #

• 滚动事件触发频率较高，如果页面有大量其他交互逻辑，可以添加节流函数优化性能，减少重复计算次数
• 不需要滚动回顶部时重新隐藏图片的话，直接删除else分支的代码即可

内容的提问来源于stack exchange，提问作者Kanchon Gharami