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 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..
|