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');
}
});
});