fixed scrolling

Script to stick HTML element to the top when scrolled through

jQuery div fixed position of div when scrolling.

The HTML Code:
<div id="stick-here"></div>
<div id="stickThis">Sticky note</div>

JavaScript Code:
function sticktothetop() {
    var window_top = $(window).scrollTop();
    //alert(window_top);
    var top = $('#stick-here').offset().top;
    if (window_top > top) {
        $('#stickThis').addClass('stick');
    } else {
        $('#stickThis').removeClass('stick');
    }
}
$(function() {
    $(window).scroll(sticktothetop);
    sticktothetop();
});

CSS Code:
#stickThis.stick {
    margin-top: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
}

jQuery Reference file  URL-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Live example as,

OR

You can use jQuery to do it:

jQuery(document).ready(function (){
    $(window).scroll(function() {
        if ($(this).scrollTop() === 100) { // this refers to window
            $('.ad-container').css('position', 'fixed');
        } else {
            $('.ad-container').css('position', 'static');
       }
    });
});
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Script to stick HTML element to the top when scrolled through Script to stick HTML element to the top when scrolled through Reviewed by Anil Singh on 4:23 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^