 |
| jQuery Sticky Sidebar , sidebar, sticky |
sidebar, sticky
jQuery Sticky Sidebar , sidebar, sticky
Example Link: https://codepen.io/graphicscity/pen/vYEyLwZ
Example Link: https://drive.google.com/file/d/1kGbImXSRm8B0I5LFTb-OSIjjuAMrR0Iy/view?usp=sharing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 1000px;
position: relative;
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: left;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}</style>
</head>
<body>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar This is side bar This is side bar This is side bar This is side bar This is side bar This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer sticky-stopper">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
</script>
</body>
</html>HOME
Post a Comment