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的底部 - ＆gt;如果浏览器窗口顶部大于侧边栏固定的视差

$(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>

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

1 个答案: