Sticky sidebar v1

Change class name on click in jQuery

by Petr Haluza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
<div id="container">
  <div id="scrollable">
    <p>Top</p>
    <p>Bottom</p>
  </div>


</div>

CSS

#container {
  position: relative;
  width: 100%;
  height: 1000vh;
  background: navy repeating-linear-gradient(darkseagreen, darkseagreen 100px, seagreen 100px, seagreen 200px);
  box-sizing: border-box;
  margin: 150px 0;
  padding: 20px;
}

#scrollable {
  top: 0;
  width: calc(50% - 10px);
  height: 150vh;
  background: skyblue repeating-linear-gradient(-45deg, skyblue, skyblue 20px, deepskyblue 20px, deepskyblue 40px);
  border-top: 20px solid dodgerblue;
  border-bottom: 20px solid dodgerblue;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font: 20px Arial, Helvetica, sans-serif;
}

#scrollable {

}

JavaScript

$('#scrollable').stick_in_parent();