Learn how to enhance your website's usability by implementing a scrollable sticky sidebar using HTML, CSS, and JavaScript. Follow our step-by-step guide for seamless integration.
Table of Contents
A scrollable sticky sidebar remains fixed on the screen as users scroll through the webpage, ensuring that crucial information, links, or navigation options are always visible and easily accessible. This feature is particularly beneficial for websites with lengthy content or complex navigation structures.
In this comprehensive guide, we'll delve into the process of creating a scrollable sticky sidebar using HTML, CSS, and JavaScript. Whether you're a novice web developer looking to expand your skills or a seasoned pro seeking to optimize user experience, this tutorial will equip you with the knowledge and tools necessary to implement this feature seamlessly.
Throughout the tutorial, we'll provide step-by-step instructions, accompanied by clear explanations and code snippets, to guide you through each stage of the implementation process. By the end, you'll have a solid understanding of how to integrate a scrollable sticky sidebar into your website, empowering you to elevate user experience and enhance navigation for your audience.
So, let's embark on this journey together as we explore the world of scrollable sticky sidebars and unlock the potential they hold for improving the usability and accessibility of your website.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our sticky sidebar.
After creating the files, paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let break down the HTML code step by step:
1. <!DOCTYPE html>: Declares the document type and version of HTML being used.
2. <html lang="en">: Defines the root element of the HTML document and specifies the language (English) for screen readers and search engines.
3. <head>: Contains meta-information about the HTML document, such as character encoding, viewport settings, and links to external resources like CSS and JavaScript files.
<meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8 (Unicode).<meta http-equiv="X-UA-Compatible" content="IE=edge">: Sets the compatibility mode for Internet Explorer to the latest version.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport settings for responsive design.<title>Scrollable Sticky Sidebar</title>: Sets the title of the webpage.<link rel="stylesheet" href="styles.css">: Links an external CSS file named "styles.css" for styling.<link rel="stylesheet" href="https://cdn.jsde...css">: Links an external CSS file from a CDN (Content Delivery Network) for using Semantic UI framework styles.
4. <body>: Contains the content of the webpage.
<div class="ui center aligned container">: Creates a container with center alignment using Semantic UI classes.- Inside this container, there is a grid system used for layout.
- The grid contains a row with a centered page header (
<div class="ui centered row page-header">) containing a heading. - Following the page header, there is another container with a grid for the main content and sidebar.
- The sidebar (
<div class="ui four wide computer only column static-bar">) is sticky and contains multiple segments, each with an image, heading, and description. This sidebar is visible only on computers. - The main content area (
<div class="ui twelve wide computer sixteen wide mobile column body-content">) contains multiple sections, each represented by a raised segment (<div class="ui raised segment">). Each section has an image, heading, subtext, and an accordion-style content section with questions and answers about dogs.
5. At the end of the body, there are script tags linking jQuery, Semantic UI JavaScript, and a custom JavaScript file named "script.js" for additional functionality.
This is the basic structure of our scrollable sticky sidebar using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Next, we need to style our sidebar by adding CSS. This will give our sticky sidebar an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Let's break down the CSS code step by step:
1. * { font-size: 16px; }: This rule sets the default font size to 16 pixels for all elements on the page. The asterisk (*) is a wildcard selector, meaning it selects all elements.
2. .page-header { margin-bottom: 25px; }: This rule applies to elements with the class "page-header" and adds a margin of 25 pixels at the bottom.
3. .page-header h1 { font-size: 35px; margin-top: 15px; }: This rule targets the h1 elements within elements with the class "page-header". It sets the font size to 35 pixels and adds a margin of 15 pixels at the top.
4. .static-bar .segment { padding-left: 15px; text-align: left; }: This rule applies to elements with the class "segment" that are children of elements with the class "static-bar". It adds padding of 15 pixels to the left and aligns the text to the left.
5. .static-bar .segment img { width: 35px; display: inline-block; vertical-align: middle; }: This rule targets images within elements with the class "segment" that are children of elements with the class "static-bar". It sets the width of the images to 35 pixels, makes them inline-block elements, and vertically aligns them to the middle.
6. .static-bar .heading { display: inline-block; text-align: left; font-size: 20px; padding-left: 10px; color: #000; }: This rule targets elements with the class "heading" that are children of elements with the class "static-bar". It makes them inline-block elements, aligns the text to the left, sets the font size to 20 pixels, adds padding of 10 pixels to the left, and sets the text color to black.
7. .static-bar p { text-align: left; font-size: 14px; padding-top: 10px; color: #000; }: This rule applies to paragraphs within elements with the class "static-bar". It aligns the text to the left, sets the font size to 14 pixels, adds padding of 10 pixels at the top, and sets the text color to black.
8. .body-content .segment { text-align: left; }: This rule targets elements with the class "segment" that are children of elements with the class "body-content" and aligns the text to the left.
9. .body-content .segment img { width: 35px; display: inline-block; vertical-align: top; }: This rule targets images within elements with the class "segment" that are children of elements with the class "body-content". It sets the width of the images to 35 pixels, makes them inline-block elements, and vertically aligns them to the top.
10. .body-content .segment h2 { line-height: 35px; display: inline-block; margin: 0px 0px 15px 10px; font-size: 25px; }: This rule targets h2 elements within elements with the class "segment" that are children of elements with the class "body-content". It sets the line height to 35 pixels, makes them inline-block elements, sets the margin to 0 pixels at the top and bottom, 0 pixels at the left, and 15 pixels at the right, sets the font size to 25 pixels.
11. .body-content .segment .subtext { color: #aaa; display: block; }: This rule targets elements with the class "subtext" that are children of elements with the class "segment" within elements with the class "body-content". It sets the text color to a light gray (#aaa) and makes them block-level elements.
12. .body-content .segment .ui.accordion { margin-top: 20px; }: This rule targets elements with the class "ui.accordion" that are children of elements with the class "segment" within elements with the class "body-content". It adds a margin of 20 pixels at the top.
13. .ui.accordion .item { border-bottom: 1px #aaa solid; padding: 5px 0px; }: This rule applies to elements with the class "item" within elements with the class "ui.accordion". It adds a bottom border of 1 pixel solid with the color light gray (#aaa) and sets padding of 5 pixels at the top and bottom, 0 pixels at the left and right.
14. .ui.accordion .item:last-child { border-bottom: 0px; }: This rule targets the last child of elements with the class "item" within elements with the class "ui.accordion" and removes the bottom border.
15. .ui.accordion .item .title { color: #A966AA; }: This rule targets elements with the class "title" that are children of elements with the class "item" within elements with the class "ui.accordion". It sets the text color to a specific shade of purple (#A966AA).
16. .ui.accordion .item p { padding-bottom: 10px; }: This rule targets paragraphs within elements with the class "item" within elements with the class "ui.accordion". It adds padding of 10 pixels at the bottom.
* {
font-size: 16px;
}
.page-header{
margin-bottom: 25px;
}
.page-header h1{
font-size: 35px;
margin-top: 15px;
}
.static-bar .segment {
padding-left: 15px;
text-align: left;
}
.static-bar .segment img{
width: 35px;
display: inline-block;
vertical-align: middle;
}
.static-bar .heading{
display: inline-block;
text-align: left;
font-size: 20px;
padding-left: 10px;
color: #000;
}
.static-bar p{
text-align: left;
font-size: 14px;
padding-top: 10px;
color: #000;
}
.body-content .segment{
text-align: left;
}
.body-content .segment img{
width: 35px;
display: inline-block;
vertical-align: top;
}
.body-content .segment h2{
line-height: 35px;
display: inline-block;
margin: 0px 0px 15px 10px;
font-size: 25px;
}
.body-content .segment .subtext{
color: #aaa;
display: block;
}
.body-content .segment .ui.accordion{
margin-top: 20px;
}
.ui.accordion .item {
border-bottom: 1px #aaa solid;
padding: 5px 0px;
}
.ui.accordion .item:last-child{
border-bottom: 0px;
}
.ui.accordion .item .title{
color: #A966AA;
}
.ui.accordion .item p {
padding-bottom: 10px;
} Step 3 (JavaScript Code):
Finally, we need to create a Sticky and Accordion function in JavaScript.
1. $('.ui.sticky').sticky({ context: '.body-content' });:
- This line selects all elements with the class 'ui.sticky' using jQuery.
- It then applies the Sticky plugin to these selected elements.
- The sticky() function is called on these elements with an object passed as an argument.
- Within this object, a property context is set to '.body-content'. This indicates that the sticky behavior should be confined within the context of elements with the class 'body-content'.
2. $('.ui.accordion').accordion();:
- This line selects all elements with the class 'ui.accordion'.
- It then applies the Accordion plugin to these selected elements.
- The accordion() function is called on these elements, initializing them as accordions, which allows them to expand and collapse sections when clicked.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$('.ui.sticky')
.sticky({
context: '.body-content'
});
$('.ui.accordion')
.accordion();Final Output:
Conclusion:
In conclusion, creating a scrollable sticky sidebar using HTML, CSS, and JavaScript can significantly enhance the usability of your website. By following the steps outlined in this tutorial, you'll be able to implement this feature with ease and elevate the overall user experience.
Code by: CapThrill
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
