How to create a fixed div on scroll down jquery

Fixed div scrolling

The concept of this demo is the sidebar that should appear on the right side of the page .and the left side contains the content .while the user is scrolling down and also, when they are scrolling the page up then the sidebar should follow/scroll the page. To achieve, 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 </p>
		<p>Vestibulum sed felis</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 the right side we are using a class called a 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 sidebar.

Output:

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