搜索

回答

通过js侦测滚动距离触发style修改实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>


    <style>

        * {
            padding: 0;
            margin: 0;
        }
        .fixedwrap {
            padding: 10px;
            text-align: center;
            background: black;
            color: white;
            height: 50px;
        }
        .fixedwrapshow {
            display: block;
            padding: 10px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: green;
            opacity: 0.6;
        }
        .cont {
            height: 200vh;
        }
    </style>
</head>
<body>
    <div class="fixedwrap" id="fixeds">
        <div>
            菜单部分
        </div>
    </div>
    <div class="cont">
        <h1>滚动鼠标试试</h1>
        页面主体部分</br>
    页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
页面主体部分</br>
</div>
<script type="text/javascript">
window.onscroll = function() {
// 获取鼠标滚轮滚动距离
var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var tag = document.getElementById('fixeds');
if (_scrollTop >= 2) {
//当滚动时加增加class
tag.classList.add('fixedwrapshow')
} else {
tag.classList.remove('fixedwrapshow');
}

}
</script>
</body>
</html>

网友回复

我知道答案，我要回答

我有问题

回答

如何将linux服务器的文件目录映射到windows电脑磁盘？

Docling 与 MarkItDown 两个库有啥不同？

豆包收费后国产其他ai软件也会跟进收费吗？

JPEG 与 HEIF图片格式区别？

centos7版本太旧无法安装python3.11，如何在docker中运行python3.11？

python如何做个RPA按键精灵的程序？

写一个windows的cmd的python代码如何在命令行中捕获获取复制粘贴的图片？

如何将别人爆款的抖音短视频短剧文案提取为seedance2的提示词？

阿里云域名dns云解析10万次日限额如何应对？

windows电脑如何提交上架ipa苹果应用？