Membuat Recomended News Muncul Di Bawah Website Saat Page di Scroll dengan CSS dan jQuery

Iseng-iseng gugling untuk membuat popup yang muncul saat halaman website di scroll tapi yang muncul ga pernah ada, sudah menggunakan keyword Cara membuat notifikasi recomended artikel dengan jquery, membuat popup untuk artikel random dengan css, notification of reaching bottom of page, but i can't find that, haha. mungkin dari pembaca sekalian lebih jago googling nya? So, what is the name for this popup? bagi saya cukup diberi judul Membuat Recomended News Muncul Di Bawah Website Saat Page di Scroll dengan CSS dan jQuery.  

Oke langsung saja kita bahas cara pembuatannya, yang pertama tentunya sobat harus import terlebih dahulu file jquery.js, bisa di download di halaman resminya di https://jquery.com/download/ pilih yang uncompressed karena bedanya dengan yang compressed adalah sintakasnya belum di minimalkan, bisa dibuktikan sendiri yang compressed sudah tidak menggunakan barus enter dalam penulisan sintaksnya, sepertinya fungsinya untuk mempercepat loading sintaksnya. berbeda dengan yang uncompressed sintaskya masih bisa dibilang terbaca karena ditulis dengan rapi. 

kemudian yang ke 2 sobat paham tentang sintaks-sintaks dasar CSS, dan juga paham dengan event-event dari jQuery. kira-kira yang akan kita buat seperti ini :

Bisa sobat lihat ada popup di sisi kanan bawah, dan itu muncul saat kita scroll, can u see?

sekarang sobat buat file html/php , atau jika sudah ada simpan sintaks berikut ini di atas tag </body>

 <div class="news-bottom">
                <div class="header-news-bottom">Recomended <i class="fa fa-thumbs-up" aria-hidden="true"></i></div>
                <span class="close-news-bottom">x</span>
                <div class="pic-news-bottom">
                    <img src="URL GAMBAR"> </div>
                <div class="judul-news-bottom"><p><a href='LINK UNTUK ARTIKEL'>JUDUL ARTIKEL</a></p>"</div>
                <div class="isi-news-bottom">ISI ARTIKEL</div>
    </div>

dan masukkan css ini : 

.news-bottom{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.43);
    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.43);
    position: fixed;
    z-index: 200;
    width:352px;
    background: #fff;
    bottom: 5px;
    right: 1em;
    margin:0 auto;
    display: none;
}
.news-bottom span:hover{
    color:#fff;
    background:#777;
}
.header-news-bottom {
    border-bottom: 1px #eee solid;  
    height:25px;
    padding : 5px;
    display: block;
    background: #e1f5fe;
}
.close-news-bottom{
    position: absolute;
    top:2px;
    padding:0px 6px 0 6px;
    border-radius: 50%;
    right: 5px;
    cursor: default;
    overflow: hidden;
    background: #fff;
}
.pic-news-bottom{
    background: #eee;
    float: left;
    width: 90px;
    height: 90px;
    padding:3px 3px 3px 3px;
    margin:1px 1px 1px 1px;
    overflow: hidden;
}
.pic-news-bottom > img {
    width:100%;
    height:100%;
    overflow: hidden;
}
.judul-news-bottom{
    display: block;
    width:260px;
    max-height: 50px;
    padding: 1px 5px 1px 1px;
    overflow: hidden;
    margin: 1px;
    font-size: 1.2em;
    text-align: left;
}
.isi-news-bottom {
    max-height: 40px;
    overflow: hidden;
}

dan ini function jquerynya:

$(window).scroll(function () {
    if ($(this).scrollTop() > 400) {
         $('.news-bottom').show('slide', {direction: 'right'}, 1000);
    } else {
         $('.news-bottom').hide('slide', {direction: 'right'}, 1000);
    }
});
$('.close-news-bottom').click(function () {
   $('.news-bottom').remove('.news-bottom');
});

400 adalah scroll,. dan 1000 adalh kecepatan slide muncul,.

Silahkan sobat running ..

Sekian tutorial sederhana  Cara Membuat Recomended News Muncul Di Bawah Website Saat Page di Scroll dengan CSS dan jQuery ini, mohon maaf bila terdapat kesalahan dalam penyampaian. terimakasih..