Prev Demo
Fix Position Of Element After Certain Scroll
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <h1>Fix position of element after certain scroll</h1> <div style="background-color:yellow;color:red;width:100px;right:0px;" id="divScroll">This should be fix after certain scroll.</div> <p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p><p> Keep scrolling</p> <script> function fixSocial() { // if ($(document).width() < 768) { return;} // uncomment to stop this in small screen var scrollPos = $(document).scrollTop(); if (scrollPos > 160) { $("#divScroll").css({'position' : 'fixed', 'top' : '75px'}); } else { $("#divScroll").css({'position' : 'relative', 'top' : 'auto'}); } } window.onscroll = fixSocial; </script> </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
