Create a Sticky Sidebar
How to » Create a Sticky Sidebar
Study in this chapter:
1. - How can I create my sidebar sticky in HTML and CSS?
2. - sticky Sidebar without javascript
3. - sticky Sidebar with javascript
To create a Sticky Sidebar, use position: sticky; CSS style property to "stick" the Sticky Sidebar, and position: sticky; to make it stick to its parent element.
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Example:
Sticky sidebar without javascript
Sticky sidebar without javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sticksy.js jQuery Example</title>
<style>.sidebar {
width: 25%;
height: 800px;
min-height: 200px;
overflow: auto;
position: sticky;
top: 5%;
}
.header {
width: 100%;
height: 120px;
min-height: 200px;
background-color: #FFF;
margin-top: 4px;
margin-right: auto;
margin-bottom: 12px;
margin-left: auto;
border: 5px solid #222;
border-radius: 10px;
}
.footer {
width: 100%;
height: 120px;
min-height: 200px;
background-color: #FFF;
margin-top: 12px;
margin-right: auto;
margin-bottom: 12px;
margin-left: auto;
border: 5px solid #222;
border-radius: 10px;
}
.main {
width: 60%;
height: 200vh;
min-height: 1000px;
display: flex;
flex-direction: column;
}.main,
.sidebar {
border: 5px solid #222;
background-color: white;
border-radius: 10px;
color: #222;
padding: 15px;
}.wrapper {
display: flex;
justify-content: space-between;
}body {
padding: 3%;
background-color: #ccc;
font-size: 20px;
font-family: Lato, sans-serif;
}code, pre {
background-color: #ccc;
padding: 0 3px;
border-radius: 5px;
}.bottom {
justify-self: bottom;
}
</style>
</head>
<body>
<div class="header"> Header Title</div>
<div class="wrapper"><div class="main">
<h2>Main content</h2>
<p>Scroll down the page!</p>
<h3>How to recreate this</h3>
<p>
Position the columns with flex. Then apply two lines of CSS to the sidebar to make it sticky:
<pre>
.sidebar {
position: sticky;
top: 0;
}
</pre>
Include <code>position: -webkit-sticky;</code> for Safari.
</p>
</div><div class="sidebar">
<h3>Sticky sidebar</h3>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
<p>This is sticky column</p>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
Related subjects:
create search bar using CSS HTML
Shrink Navigation Menu on Scroll
Create a Sticky Navbar
Sticky sidebar using javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sticksy.js jQuery Example</title>
<style>
*, *::after { box-sizing: border-box; }body {
font-family: "Open Sans", Helvetica, sans-serif;
color:#222;
margin: 10px 20px;
font-size: 18px;
min-height: 250vh;
background: linear-gradient(135deg, rgb(191, 233, 193) 0%,
rgb(191, 233, 193) 1%,rgb(194, 206, 183) 1%, rgb(194, 206, 183)
56%,rgb(197, 180, 173) 56%, rgb(197, 180, 173) 75%,rgb(201, 153,
163) 75%, rgb(201, 153, 163) 80%,rgb(204, 126, 152) 80%, rgb(204, 126, 152)
87%,rgb(207, 100, 142) 87%, rgb(207, 100, 142) 97%,rgb(210, 73, 132) 97%,
rgb(210, 73, 132) 100%);
}.container {
max-width: 728px;
margin: 0 auto;
}.wrapper { display: flex; }
header, footer {
font-size: 2em;
background-color:#e5e5e5;
padding: 15px;
text-align:center;
}main {
flex: 1;
padding:0 20px;
line-height: 1.5em;
}aside {
width:30%;
min-width: 150px;
max-width: 300px;
}aside .widget {
padding:15px;
margin:7px 0;
text-align:center;
background-color:#e5e5e5;
}@media (max-width: 1000px){
body { font-size: 16px; }
aside {
max-width: 200px;
}
}
</style>
</head>
<body>
<div class="container">
<header>Sticksy.js jQuery Example</header>
<div class="jquery-script-ads" style="margin:30px auto"></div>
<div class="wrapper">
<main>
<h2>Article title</h2>
<p>
This dissertation joins a vibrant conversation in the social sciences about the challenging nature
of care labor as well as feminist discussions about the role of the daughter in Victorian culture.
</p>
<p>
It explores the literary presence of the middle class managing daughter in the Victorian home.
Collectively, the novels in this study articulate traditional roles, which do not easily adapt
to managing daughters, even if they are the ones holding the family together.
</p>
<p>
The managing daughter is a problem not accounted for in any conventional domestic structure or
ideology so there is no role, no clear set of responsibilities and no boundaries that could,
and arguably should, define her obligations, offer her opportunities for empowerment,
or set necessary limits on the broad cultural mandate she has to comfort and care others.
</p>
<p>
The extremes she is often pushed to reveals the stresses and hidden conflicts for authority
s a woman assumes the right position in the family then deep emotional connections to
others are not necessary for her to care competently for others
</p>
<p>
This dissertation joins a vibrant conversation in the social sciences about the
challenging nature of care labor as well as feminist discussions about the role of
the daughter in Victorian culture.
</p>
<p>
It explores the literary presence of the middle class managing daughter in the Victorian home.
but by proscribed traditional roles, which do not easily adapt to managing daughters,
even if they are the ones holding the family together.
</p>
</main>
<aside class="sidebar">
<div class="widget is-sticky">
<h2>Ad</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
<div class="widget">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="widget">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</aside>
</div>
<footer>Footer</footer>
</div><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://www.jqueryscript.net/demo/fix-sidebar-bottom-sticksy/sticksy.js"></script>
<script>
// $('.widget.is-sticky').sticksy()
new Sticksy(document.querySelector('.is-sticky'))
</script></body>
</html>
Tags: sticky sidebar html css on scroll, jquery, react
How do I make my sidebar sticky?
How do I stop my sidebar from scrolling?
How to create sidebar in HTML and CSS?
sticky sidebar HTML CSS
How to create a sticky sidebaHTML CSS and <script> ?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*,
*:before,
*:after{
box-sizing: border-box;
}body{
font-family: Arial;
}
header{
color: #888;
}header h1{
font-size: 30px;
}.container{
max-width: 700px;
margin: 0 auto;
}#content{
border: 2px dotted green;
padding: 18px;
margin-left: 215px;
min-height: 2000px;
color: darkgrey;
}#sticky-sidebar-demo{
float: left;
width: 200px;
color: #ffbdbd;
will-change: min-height;
}#sticky-sidebar-demo .sidebar__inner{
border: 2px dotted red;
padding: 10px;
position: relative;
transform: translate(0, 0);
transform: translate3d(0, 0, 0);
will-change: position, transform;
}footer{
height: 300px;
height: 85vh;
border: 2px dotted black;
margin-top: 20px;
text-align: center;
color: #8e8d8d;
background: rgba(0, 0, 0, 0.02);
line-height: 300px;
line-height: 95vh;
}footer p{
margin: 0;
}
</style></head>
<body>
<header>
<div class="container">
<h1>Slogan/Logo</h1>
</div>
</header><div class="container">
<div id="sticky-sidebar-demo">
<div class="sidebar__inner">
<p>The content for sticky sidebar</p>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.</p><p>In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl.</p>
<p>Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor.</p>
</div>
</div><footer>
<p>Very Tall Footer</p>
</footer>
<script type="text/javascript" src="https://www.jquery-az.com/jquery/js/sticky-sidebar/sticky-sidebar.js"></script>
<script type="text/javascript">var a = new StickySidebar('#sticky-sidebar-demo', {
topSpacing: 25,
containerSelector: '.container',
innerWrapperSelector: '.sidebar__inner'
});
</script>
</body>
</html>
Summary of description
How do I make my sidebar sticky?
Create a Sticky Sidebar - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.