具有固定侧边栏滚动的视差

Question

我想做一个视差，当你向下滚动时，它会显示内容和侧边栏。当您进一步滚动时，当侧边栏到达顶部时，它会停在那里(固定)。 目前，我的侧边栏已经固定并阻止了视差的整个图像。

这是它的样子。

.CSS：

body, html {
height: 100%;
}
#parallax { 
background-image: url("https://image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#sidebar {
padding: 100px;
position: fixed;
}

.HTML：

<div id="maincontent">
<div id="sidebar">
sidebar content here
</div>
<div id="content">
</div>
</div>

我不确定要更改或添加什么内容div 以使所有内容都出现在视差之后。

Answer 1

希望这就是您正在寻找的内容：) 你需要jQuery来提供我的解决方案：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

此示例仅用于获取概念，并且已超载。我只是建议你玩jquery的东西

#parallax { 
background-image: url("https://tailandfur.com/wp-content/uploads/2016/03/40-Big-Dog-Puppy-Pictures-7.jpg");
height: 100vh; 
width:100vw;
background-attachment: fixed;
background-size: cover;
}
#sidebar {
height:20%;
width:20%;
float:left;
background-color: orange;
}
.content{
float:right;
height:120%;
width:80%;
}

jQuery的事情：每次触发滚动事件时，浏览器都会检查，如果浏览器窗口的顶部到达视差div的底部-->如果浏览器窗口顶部大于视差，侧边栏是固定

的

$(document).scroll(function() {
if($(document).scrollTop() >= $("#parallax").offset().top + $("#parallax").height()){
$("#sidebar").css("position", "fixed").css("top", "0").css("left", "0");
}
else{
$("#sidebar").css("position", "relative");
}
});

.HTML：

<div id="parallax"></div>
<div id="maincontent">
<div id="sidebar" class="relative">sidebar content here</div>
<div class="content" style="background-color: green;"></div>
<div class="content" style="background-color: blue;"> </div>
</div>