How to create a fixed div on scroll down jquery

Fixed div scrolling

The concept of this demo is the sidebar that should appears on right side of the page .and the left side is contain with the content .while the user is scrolling down and also, when they are scrolling the page up then the side bar should follow/scroll the page. To achive, this we are using jquery.

The <html> element is the root element of an HTML page,the <head> element contains meta information and <title> element specifies a title for the document. The <style> tag is used to define style information for an HTML document.

HTML

<div class="container">
	<div class="text">
		<h1>Scroll Container A</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit 
	amet nulla sem, nec consectetur velit. Aliquam tempus, nisl sed 
	fringilla rutrum, tellus risus molestie nisl, nec molestie nunc tellus 
	vitae urna. Sed ornare mollis metus ac eleifend. Nulla at purus leo. 
	Vivamus egestas lorem vitae risus interdum vitae vehicula libero 
	aliquam. Vestibulum cursus est vel tellus consectetur rutrum condimentum
	 magna euismod. In venenatis dapibus dui, non laoreet tellus consectetur
	 id. Fusce ut ornare turpis. Suspendisse in leo quis massa auctor 
	
	lorem rutrum bibendum sit amet id mauris. Pellentesque habitant morbi 
	tristique senectus et netus et malesuada fames ac turpis egestas. Duis a
	 risus ac ligula pulvinar placerat nec ac felis. Quisque a massa elit, 
	vel ornare felis. Quisque placerat, dui vel tristique facilisis, sem 
	lectus tincidunt neque, ac iaculis lectus leo id felis.</p>
		<p>Vestibulum sed felis diam. Vivamus ac mi semper massa tincidunt 
	placerat. Phasellus consectetur, augue nec faucibus lobortis, diam 
	ligula pharetra nisi, ut consequat magna leo porta mauris. Nunc vitae 
	dolor nisi. Sed at neque nec arcu eleifend suscipit. Fusce pellentesque 
	purus ullamcorper orci scelerisque adipiscing. Curabitur placerat mi 
	eget tortor hendrerit vehicula in sit amet eros. Vestibulum ante ipsum 
	primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin 
	nec justo ac dolor dignissim pulvinar feugiat in sapien. Suspendisse 
	tincidunt tristique risus, sed faucibus arcu sagittis eu. Nulla et 
	dignissim tortor. Suspendisse dictum ornare velit, at viverra mi 
	condimentum a.</p>
	</div>

	<div class="scroll">
		<h2>Scroll Element A</h2>
		Scroll down/up to see me smoothly reposition myself and keep in view.<br><br>
		
	</div>

	<div class="clear"><!-- clear --></div>
</div>

CSS

body{background-color: #f9f7fc;
padding: 6rem 0;}
.container { 
background-color: #fff; 
margin: 0px 50px 100px 50px; 
padding: 50px;
}	
.text {float: left;width: 70%;}
.scroll {float: left; width: 21%; padding: 0% 2% 2%; margin-left: 4%; 
margin-top: 85px; border: 2px solid #32d296;background-color:#FFEEEE;
background:#edfbf6;color: #32d296;}		
.clear {clear: both;}

To create this type of demo we are using a class container and text and scroll.To create left side content we used a class called text and to create right side we are using a class called scroll . In that scroll we defined some properties like width:21%; margin-left, float, background-color. we are calling a function scroll in jquery .

$().ready(function() {
     $(".scroll").jScroll();
});   

By using this function we created the follow/scroll side bar.

Output:

we the user scrolling the page from top to bottom or bottom to top the sidebar will scroll/follow the page.

 

Leave a Reply

Your email address will not be published. Required fields are marked *