Show Div OnScroll With LazySize.js

Show Div OnScroll With LazySize.js Beberapa hari ngutak-ngatik lazy load untuk image dan video Youtube dengan lazysize.js, saya jadi punya ide untuk memanfaatkan lazysize.js untuk show div onscroll untuk fixed widget.

Seperti kita ketahui bahwa lazysize.js menggunakan class="lazyload" dan kemudian ketika halaman di-scroll dan object akan memasuki above the fold maka class="lazyload" akan berubah menjadi class="lazyloaded" yang menandakan bahwa sumber element sudah dimuat blowser.

Dengan begitu kita bisa memanfaatkan perubahan class="lazyload" menjadi class="lazyloaded" ketika di-scroll untuk show floating/fixed div. Kita menggunakan .lazyloaded untuk memunculkan fixed div, kita tinggal mengatur tempat widget-nya sebelum di-scroll agar tidak langsung menjadi class="lazyloaded" untuk menunda kemunculannya (di sini saya menganggap Anda sudah menggunakan lazysize.js di blog), seperti berikut:

Sebelum discroll:


.fixed {

  position: relative;

  margin-top: 1000px;

  width: 300px;

  bottom: 0;

  left: 0;

  z-index: 9999;

}

Widget diletakan di bawah above the fold dengan position: relative, misalnya di sidebar bawah. Di sini saya menggunakan margin-top: 1000px untuk mengatur ketinggian scroll.

Kemudian ketika halaman di-scroll maka class="lazyload" akan berubah menjadi class="lazyloaded" dan kita gunakan position: fixed agar widget menjadi melayang.


.fixed.lazyloaded {

  position: fixed;

}


Kita juga bisa menambahkan animasi ketika widget muncul dengan css animasi. Sebagai contoh, di bawah ini css dan html untuk widget yang saya gunakan di demo.

Kode CSS


.fixed {

  position: relative;

  margin-top: 1000px;

  width: 300px;

  bottom: 0;

  left: 0;

  z-index: 9999;

}

.fixed.lazyloaded {

  position: fixed;

  animation: totop 1s;

  -moz-animation: totop 1s;

  -webkit-animation: totop 1s

}

.fixed-content {

  width: 300px;

  height: 200px;

  background: #fff;

  border: 1px solid #ddd;

  border-left: none;

  border-bottom: none;

}

.fixed h2 {

  font-size: 16px;

  font-weight: bold;

  margin: 10px 0 10px 10px;

}

.fixed label {

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  font-size: 18px;

  font-weight: bold;

  width: 20px;

  height: 20px;

  line-height: 20px;

  text-align: center;

  background: #fff;

  border: 1px solid #dedede;

  cursor: pointer;

  z-index: 9999

}

.fixed input {

  position: absolute;

  right: -999em;

  opacity: 0

}

.fixed input[type=checkbox]:checked+div {

  position: fixed;

  bottom: 0;

  left: -500px;

  animation: toleft 1s;

  -moz-animation: toleft 1s;

  -webkit-animation: toleft 1s

}

@keyframes toleft {

  from {

    left: 0

  }

  to {

    left: -500px;

  }

}

@-moz-keyframes toleft {

  from {

    left: 0

  }

  to {

    left: -500px;

  }

}

@-webkit-keyframes toleft {

  from {

    left: 0

  }

  to {

    left: -500px;

  }

}

@keyframes totop {

  from {

    bottom: -500px

  }

  to {

    bottom: 0;

  }

}

@-moz-keyframes totop {

  from {

    bottom: -500px

  }

  to {

    bottom: 0;

  }

}

@-webkit-keyframes totop {

  from {

    bottom: -500px

  }

  to {

    bottom: 0;

  }

}

Kode HTML


<div class="fixed lazyload">

  <label for='item-1'>&times;</label>

  <input id='item-1' name='one' type='checkbox' />

  <div class="fixed-content">

    <h2><span>Widget Fixed</span></h2>

    <div>

      <img src="https://i.ytimg.com/vi/vUQkLrEjpm0/maxresdefault.jpg" width="300" height="120">

    </div>

  </div>

</div>