问题描述
我正在尝试制作一个半高的分屏。我希望左侧固定,右侧可滚动,它们都有 50% 的高度。我尝试使用 ScrollMagic 并实现了 100% 高度的效果,但无法实现半高的效果。我也在左侧 div 上使用了 position:sticky 但遇到了同样的问题。
function splitScroll(){
const controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
duration: "50%",triggerElement: '.au-left',triggerHook: 0
})
.setPin('.au-left')
.addindicators()
.addTo(controller);
}
splitScroll();
* {
Box-sizing: border-Box;
}
html,body {
height: 100%;
width: 100%;
margin: 0 !important;
padding: 0 !important;
/* overflow-x: hidden; */
/* background-position: 50% 10%;
background-size: cover; */
}
.aboutus {
background-color: #1c1b1b;
color: white;
font-family: Raleway;
height: 120vh;
display: flex;
overflow-y: hidden;
}
.au-right{
padding-left: 3%;
padding-right: 6%;
height: 120vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 50%;
}
/* .au-right div{
height: 100vh;
} */
.au-left {
background-color: pink;
width: 50%;
padding-left: 3%;
padding-right: 3%;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0!important;
z-index: 0;
}
footer{
background-color: white;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js"
integrity="sha512-UgS0SVyy/0fZ0i48Rr7gKpnP+Jio3oC7M4XaKP3BJUB/guN6Zr4BjU0Hsle0ey2HJvPLHE5YQCXTDrx27Lhe7A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"
integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addindicators.js"
integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="aboutus">
<div class="au-left">
FIXED SECTION
</div>
<div class="au-right">
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
SCROLLABLE <BR>
</div>
</section>
<footer>
footer<br>
footer<br>
footer<br>
footer<br>
footer<br>
footer<br>
footer<br>
footer<br>
footer<br>
footer<br> footer<br> footer<br>
</footer>
解决方法
您可以使用 css flexbox
实现您想做的事情,而无需任何 JavaScript。请参阅下面的代码。
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
height: calc(100vh - 20px);
}
section {
height: 50%;
overflow: hidden;
display: flex;
}
footer {
background: #d4e5f6;
}
.au-left,.au-right {
flex: 1;
}
.au-right {
height: 100%;
overflow: scroll;
background: #adadad;
}
.au-left {
background: #a1b2c3;
}
<link href="./src/styles.css" />
<div class="container">
<section class="aboutus">
<div class="au-left">
FIXED SECTION
</div>
<div class="au-right">
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
SCROLLABLE <br />
</div>
</section>
<footer>
footer<br />
footer<br />
footer<br />
footer<br />
footer<br />
footer<br />
footer<br />
</footer>
</div>