Issue with creating Sticky Div in fixed position

user_9427866 0
Viewed 93

I have tried to make a sticky DIV with the below code but it's not working as expected. When I scroll down, the DIV is sticky but its overlapping to the website Header as well as the Footer. How to resolve this issue using CSS/JS? Any help will appreciable.Thanks.

.a{
    float: left;
    width: 67%;
}
.b{
    width: 32%;
    float: right;
    position: fixed;
    right: 0;
}
.c{
    width: 100%;
}
<div class="c">
<div class="a">
-----
</div>
<div class="b">
-----
</div>
</div>

-----

css html jquery javascript
1 Answers

I guess this is what you're looking for just scroll the page to see the sticky div what could be better is to run snippet in full page

window.onscroll = function() {
  progress = document.getElementsByClassName('b')[0];
  let height = window.pageYOffset;
  if (height > 395) {
    progress.style.position = 'fixed';
    progress.style.top = `${20}px`;
  } else {
    progress.style.position = 'absolute';
    progress.style.top = `${400}px`;
  }
}
body {
  height: 300vh;
}

.b {
  width: 32%;
  position: absolute;
  top: 400px;
  background: darkcyan;
  height: 250px;
}
<div class="b"></div>

user_135368930
Related