Question

这是我的代码

function Func(){
var ypos = window.pageYOffset;
var t2 = document.getElementById('para');

if(ypos > 500)
{
    t2.style.opacity = 0;
}
else
{
    t2.style.opacity = 1;
}

}

window.addEventListener（ “滚动”，函数功能）;

我使用了视差效果。然而，当我向下滚动并到达下面的段落时，“当舞蹈遇见artm”仍然可以在lorem ipsum段落的背景中看到。 - 这一定不会发生。当我调整到一个小的浏览器窗口而不是一个完整的全屏时，我的js工作。全屏幕中的PageYoffSet值可能有问题。如何在全屏幕中改变不透明度呢？

Answer 1

轻松修复。

不是为淡出文本设置固定的scoll位置，只需抓住设备的窗口高度并根据百分比设置淡入淡出。这样，当横幅在大屏幕上缩短时，它仍然会在适当的位置消失。

<强> HTML

<html>
<head>
<link href="ho.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">The Quad</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Plans</a></li>

<li><a href="#">Contact Us</a></li>
<li><a href="#">Book Online</a></li>
</ul>
</div>
<div id="welcome">
<div id="para">
<p>Where dance meets artm</p><br/><br/>
<p class="about us">Know More</p>

</div>
</div>
<div id="bottom">
<div id="lower">
<ul>
<li><a href="#">Vhhhhhhs</a></li>

<li><a href="#">Wyyyyyyys</a></li>

<li><a href="#">Break free</a></li>

</ul>

</div>
<p class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<script src="C:\Users\bonny\Documents\samples sites\jquery\jquery.js"></script>
<style src="ho.js"></style>
</body>
</html>

<强> CSS

body{
    margin:0;
    background-color:white;
    background-color:#0d0d0d; }

#header{
    display:inline-block;
    margin:0;
    background-color:black;
    width:100%;
    height:auto;}

#header ul{
    margin:10 auto;
    opacity:0.89;
    line-style-type:none;}

#header ul li a{
    display:inline;
    color:white;
    text-decoration:none;
    text-align:center;
    padding:5px;}

#header ul li{
    display:inline;
    margin:10px;
    float:center;
    font-size:24px;
    padding:5px;

}

#welcome{
    display:inline-block;
    width:100%;
    height:700px;
    position:relative;
    background-image:url('https://pixabay.com/static/uploads/photo/2013/02/21/19/08/sand-84589_960_720.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;

}

#para p{
    color:black;
    margin:auto;
    width:100%;
    text-align:center;
    margin-top:20%;
    font-size:30px;
    position:fixed;
    overflow:hidden;
}
#bottom{
    z-index:1000;
}
#lower{
    width:100%;
    height:auto;

    display:inline-block;
    position:relative;
    background-color:black;
    }
#lower ul{
    margin:0 auto;
    opacity:0.85;
    width:80%;
    list-style-type:none;
    text-align:center;  

}

#lower ul li a {
    display:inline;
    color:white;

    text-decoration:none;
    text-align:center;
    border:2px solid grey;

}
#lower ul li{
    display:inline;
    font-size:30px;
    margin:10px;
    background-color:black;
}
p.one , p.two, p.three{
    display:none;
}
#entry1{
    color:#3366ff;

}
p.entry,p.entry2{
    margin:auto 20px;
    position:relative;

    display:inline;

}

h2{

    font-weight:strong;
    text-align:center;
    margin:auto;
    width:100%;
}

<强> JS

function Func(){
    var ypos = window.pageYOffset;
    var t2 = document.getElementById('para');
  var h = window.innerHeight;
    if(ypos > (h * .3))
    {
        t2.style.opacity = 0;
    }
    else
    {
        t2.style.opacity = 1;
    }


}

window.addEventListener("scroll",Func);

FIDDLE

Answer 2

看看：

好的，z-index 3的元素与z-index 1的元素重叠。只需在z-index 2上的文本之间添加即可。希望它能解决你的问题：）

CSS中的视差效果 - 尽管z索引，文本溢出

2 个答案: