向上滚动时如何将一个div隐藏在另一个半透明的div后面
Posted
技术标签:
【中文标题】向上滚动时如何将一个div隐藏在另一个半透明的div后面【英文标题】：How to hide a div behind another semi transparent div when scrolling up 【发布时间】：2021-05-20 18:55:45 【问题描述】：当用户向上滚动时，我希望半透明 div 在第二个半透明 div 后面“消失”。我试图避免任何重叠的不透明度。两个 div 共享相同的背景图片，我也想随着页面滚动。
编辑：
这行得通。为了解决重叠的不透明度，我在顶部 div 上复制了主体背景并给它一个更高的 z-index。当用户向上滚动时，内容会消失在这一层后面。
为了解决背景不滚动的问题，我基于这个解决方案滚动背景图片> jQuery on window scroll animate background image position
我更改了值，使顶部 div 和主体背景同时移动，因此看起来单个背景图像正在移动。
jsfiddle >>> https://jsfiddle.net/1rw4khgm/1/
$('document').ready(function()
$('#bottom').scroll(function()
var x = $(this).scrollTop();
$('#top').css('background-position','0% '+parseInt(-x)+'px');
$('body').css('background-position','0% '+parseInt(-x)+'px');
);
); body
margin: 0;
background-image: url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
background-size: 100% auto;
background-position: 0% 0;
#top
top: 0;
position: fixed;
height: 100px;
width: 100%;
background-image: linear-gradient(rgba(153, 50, 204, 0.7), rgba(153, 50, 204, 0.75)), url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
background-size: 100% auto;
background-position: 0% 0;
z-index:1;
#bottom
position: relative;
top: 100px;
height: 300px;
width: 100%;
background-color: rgba(176, 224, 230, 0.7);
overflow : auto;
overflow-x : hidden;
overflow-y : auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="top">
Nav
</div>
<div id="bottom">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content5</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content10</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</body>【问题讨论】：
如果我理解正确，那么您可以使用 JS 绑定一个滚动事件，将滚动时导航的不透明度设置为 0.1。 我用 JS 编辑了你的小提琴，现在试试 =) 请编辑您的帖子并在此处添加您的代码作为 sn-p 以获得更好的体验并随时从您的问题中获得最佳效果，因为链接可能会在稍后断开并且用户稍后找不到代码跨度> 【参考方案1】：你可以使用 JS 来实现你的目标，通过设置事件在滚动时触发
在你的小提琴中使用这个 JS 脚本并尝试
var nav = document.querySelector('#nav');
window.onscroll = function()
if (document.documentElement.scrollTop > 20)
nav.style.opacity = "0.1";
else
nav.style.opacity = "1";
【讨论】：
感谢您的回答 :) 这不是我所追求的，我希望 div 看起来向上滑动并“落后于”顶部 div。我在描述问题时遇到了麻烦，我现在对其进行了编辑以希望更有意义。我不再使用 JS 来更改不透明度，因为它会立即影响整个 div，而且我不知道如何获得它“滑出视野”的效果。相反，我只是使用 jquery 来设置背景图像的运动，其余部分依靠图层。以上是关于向上滚动时如何将一个div隐藏在另一个半透明的div后面的主要内容，如果未能解决你的问题，请参考以下文章