CODEWITHSUNDEEP
javascript
Anjali
Anjali

Reputation: 329

Stick div at top not working properly : javascript

I going to create a scroll and stick div which has to stick on the top of the page but while scrolling down the div next to stickdiv automatically stick to the div before to sticky div

var left = document.getElementsByClassName("stickdiv");

for (var i = 0; i < left.length; i++) {
  var stop = (left[0].offsetTop);

  window.onscroll = function(e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    // left.offsetTop;
    if (scrollTop >= stop) {
      // get array item by index
      left[0].classList.add('stick'); //adding a class name
    } else {
      // get array item by index
      left[0].classList.remove('stick');
    }
  }
}
.stickdiv {
  height: 50vh!important;
  width: 100vh!important;
  background-color: green!important;
}
.stick {
  position: fixed;
  top: 0;
  margin: 0 0
}
#right {
  float: right;
  width: 100px;
  height: 1000px;
  background: red;
}
.des {
  height: 300px;
  width: 100%;
  background-color: #000;
}
<div class="des"></div>
<div class="stickdiv"></div>
<div id="right"></div>

Example : green color div is the sticky div but after scrollingdown , red is also going to stick , I've tried position absolute in css but not working how to fix it

Upvotes: 0

Views: 94

Answers (2)

user6820627
user6820627

Reputation:

Here is the code to make green sticky when scrolling.

$ = document.querySelectorAll.bind(document);
  // how far is the green div from the top of the page?
  var initStickyTop = $(".stickdiv")[0].getBoundingClientRect().top + pageYOffset;
  // clone the green div
  var clone = $(".stickdiv")[0].cloneNode(true);
  // hide it first
  clone.style.display = "none";
  // add it to dom
  document.body.appendChild(clone);
    addEventListener("scroll",stick=function() {
      // if user scroll past the sticky div
      if (initStickyTop < pageYOffset) {
        // hide the green div but the div still take up the same space as before so scroll position is not changed
        $(".stickdiv")[0].style.opacity = "0";
        // make the clone sticky
        clone.classList.add('stick');
        // show the clone
        clone.style.opacity="1";
        clone.style.display = "block";
      } else {
        // make the clone not sticky anymore
        clone.classList.remove("stick");
        // hide it
        clone.style.display = "none";
        // show the green div
        $(".stickdiv")[0].style.opacity="1";
      };
    });
    // when resize, recalculate the position of the green div
    addEventListener("resize", function() {
      initStickyTop = $(".stickdiv")[0].getBoundingClientRect().top + pageYOffset;
      stick();
    });
.stickdiv {
  height: 50vh!important;
  width: 100vh!important;
  background-color: green!important;
}
.stick {
  position: fixed;
  top: 0;
  margin: 0 0
}
#right {
  float: right;
  width: 100px;
  height: 1000px;
  background: red;
}
.des {
  height: 300px;
  width: 100%;
  background-color: #000;
}
<div class="des"></div>
<div class="stickdiv"></div>
<div id="right"></div>

Upvotes: 2

Yaje
Yaje

Reputation: 2831

JS FIDDLE

you might want to remove the stickdiv class and add it accordingly

if (scrollTop >= stop) {
      // get array item by index
      left[0].classList.add('stick'); //adding a class name
      left[0].classList.remove('stickdiv');
    } else {
      // get array item by index
      left[0].classList.remove('stick');
       left[0].classList.add('stickdiv');
    }

Upvotes: 0

Related Questions