I am currently making a site with fullpage js and material design oriented to bootstrap 4 and I want one of the sections to have a static div that fills the right side and the content remains normal so elements can be added as always, the important thing is the right side . The code I have is the following
$('#fullpage').fullpage({
anchors: ['page1', 'page2'],
scrollOverflow: true,
autoScrolling: true,
paddingTop: '30px',
loopBottom: true,
css3: true,
menu: "#menu",
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/vendors/scrolloverflow.min.js"></script>
<div id="fullpage">
<div class="section fp-auto-height-responsive" id="section1">
<section id="quienes-somos" class="col-md-12 h-100 d-flex">
<div class="row justify-content-center align-self-center">
<div class="col-md-6 mb-4">
<img src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-main.jpg" class="img-fluid z-depth-1-half" alt="">
</div>
<div class="col-md-6 mb-4">
<!-- Main heading -->
<h3 class="h3 mb-3">
Contenido Titulo
</h3>
<p>
Descripcion para mostrar algun contenido aquí
</p>
<!-- Main heading -->
<hr>
<p>
Segundo parrafo de descripción para el contenido
</p>
</div>
</div>
</section>
</div>
<div class="section fp-auto-height-responsive" id="section2">
<section id="servicios" class=" row col-md-12">
<div class="row col-md-10">
<div class="card mb-3 ml-4 col-md-3">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-light-blue btn-md">Read more</button>
</div>
</div>
<div class="card mb-3 ml-4 col-md-3">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-light-blue btn-md">Read more</button>
</div>
</div>
<div class="card mb-3 ml-4 col-md-3">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/16.jpg" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Card title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-light-blue btn-md">Read more</button>
</div>
</div>
</div>
<div class="col-md-2 mb-4 bg-dark">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div>
</section>
</div>
</div>What I want is that the one that is in black is full height fixed and that only the cards can move ( I don't know if I am able to explain it well ), but that is the idea.
PS: make the snnipet executable full screen so that it can be better appreciated.
You could try using ScrollMagic (or some library that provides scrolling functions) and use the .setPin() method.
Here you can see an example
It is also possible with CSS by using the property
position:stickyHere you can find examples and user guide