Scroll condition with show - hide

show the docket on scroll by the condition

by 3gwebtrain

HTML

<div id="parent" class="parent">
  will type some info
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates praesentium similique pariatur at. Iste rem ratione veritatis officiis aliquid modi provident asperiores, ex porro quibusdam maiores impedit dolorum sit deserunt!</div>
  <div>Et officiis earum, possimus doloribus harum odio aut enim, doloremque, culpa eaque ipsum. Dicta in hic quibusdam autem, excepturi. Unde fugiat nesciunt dolores animi repellendus, exercitationem, magnam iusto incidunt distinctio.</div>
  <div>Minus dignissimos similique voluptas cum alias praesentium eos, inventore voluptatum est. Harum officia quo, maxime facere, explicabo ratione, voluptates inventore incidunt numquam cum sunt eos architecto, vero soluta saepe amet?</div>
  <div>Enim quaerat ipsam inventore laboriosam odit eum rerum, magni aperiam. Mollitia, ratione, ex. Quidem iusto enim nobis quisquam impedit autem, commodi voluptates quaerat ipsam optio temporibus consequuntur, eos, voluptatibus deleniti.</div>
  <div>Atque deserunt facilis consequatur quae eaque accusantium inventore ducimus voluptatem eius animi harum excepturi, reprehenderit earum minus distinctio hic tenetur enim veniam corrupti, blanditiis possimus doloribus qui! Voluptates, consectetur nostrum.</div>
  <p>

  </p>
    <div>Atque deserunt facilis consequatur quae eaque accusantium inventore ducimus voluptatem eius animi harum excepturi, reprehenderit earum minus distinctio hic tenetur enim veniam corrupti, blanditiis possimus doloribus qui! Voluptates, consectetur nostrum.</div>    
    <div id="button">
          <button>Click me</button>
    </div>
        <div>Atque deserunt facilis consequatur quae eaque accusantium inventore ducimus voluptatem eius animi harum excepturi, reprehenderit earum minus distinctio hic tenetur enim veniam corrupti, blanditiis possimus doloribus qui! Voluptates, consectetur nostrum.</div> 
            <div>Atque deserunt facilis consequatur quae eaque...

CSS

*{
  padding:0;
  margin:0;
}

.parent{
  height:300px;
  overflow-y:auto;
  border:2px solid blue;
}

JavaScript

var element = document.getElementById('parent');
var button = document.getElementById('button');

element.addEventListener('scroll', function(){

if(checkVisibility(button, element)){

    console.log('on visible');

  return;

}

console.log('hidden');

})



function checkVisibility(elm, parent) {
  var boundingRect = elm.getBoundingClientRect();
  var parentHeight = parent.offsetHeight;
  return !(boundingRect.bottom < 0 || boundingRect.top - parentHeight  >= 0);
}