Sticky div
How do I make an sticky div?
Sticky div. What is a sticky div? How do you make a sticky div? This script and codes were developed by Kanha Sahu on 29 December 2022, Thursday.
Sticky div - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>sticky div</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section class="container">
<div id="content" class="row"> <span class="col-xs-3" id="sidebar"> <div id="catcher"> This is the "catcher" <code>div</code> </div> <div id="sticky" style="position: fixed; top: 0px;"> This is the "sticky" <code>div</code> </div> </span> <span class="col-xs-9" style="background:#cccccc;"> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> Content <br><br><br> </span>
</div>
</section> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"'></script> <script src="js/index.js"></script>
</body>
</html>
Sticky div - Script Codes CSS Codes
body{height:2000px;}
#sidebar{}
#catcher{ background:#ff0066; padding:5px 8px; margin:10px auto; box-shadow:0 0 2px #e8e8e8; -moz-box-shadow:0 0 2px #e8e8e8; -webkit-box-shadow:0 0 2px #e8e8e8; -o-box-shadow:0 0 2px #e8e8e8; -ms-box-shadow:0 0 2px #e8e8e8;
}
#sticky{ background:#FAFAFA; padding:5px 8px; margin:0px auto; box-shadow:0 0 2px #e8e8e8; -moz-box-shadow:0 0 2px #e8e8e8; -webkit-box-shadow:0 0 2px #e8e8e8; -o-box-shadow:0 0 2px #e8e8e8; -ms-box-shadow:0 0 2px #e8e8e8;}
Sticky div - Script Codes JS Codes
$(document).ready(function() { function isScrolledTo(elem) { var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; //num of pixels above the elem var elemBottom = elemTop + $(elem).height(); return ((elemTop <= docViewTop)); } var catcher = $('#catcher'); var sticky = $('#sticky'); $(window).scroll(function() { if(isScrolledTo(sticky)) { sticky.css('position','fixed'); sticky.css('top','0px'); } var stopHeight = catcher.offset().top + catcher.height(); if ( stopHeight > sticky.offset().top) { sticky.css('position','absolute'); sticky.css('top',stopHeight); } }); });
Developer | Kanha Sahu |
Username | kaslab |
Uploaded | December 29, 2022 |
Rating | 3 |
Size | 2,225 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Bootstrap tree | 2,925 Kb |
Material design tab style | 2,486 Kb |
OnClick change div | 1,979 Kb |
CSS3 checkbox with html properties, font awesome | 1,789 Kb |
Jquery Models for login, signin, forgot password | 4,195 Kb |
Stylish Login Panel using SCSS | 3,620 Kb |
Bootstrap Glyphicon Inside Input Box | 1,857 Kb |
Responsive jquery Menu | 4,009 Kb |
Awesome responsive navigation menu bar | 2,412 Kb |
Bootstrap Navigation | 2,293 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Easing | GreenSock | 2,043 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
Minimelephant | Smashlee | 2,507 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Promodoro | Bencarp | 1,712 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!