• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

[CSS] Fixed sidebar when scrolling: Use position Sticky

Modified on: July 4, 2020

If you often surf the Internet, you may find a lot of pages with a fixed element, or a fixed sidebar. That means, the element (for example shopping cart, Buy button, or the email subscription fields) follows when you scroll up or down, which catches your attention easily. This article will show you how to do it with only several lines of CSS.

Although somebody may say it is one of the web tricks to increase customer engagement, I still think fixed sidebar is a useful feature for us as a user of the site.

Let’s think about Excel or Google Spreadsheet, the feature to freeze columns and rows brings about a lot of help in understanding the document, mostly statistics records. Since the top row stays on top all the time, we don’t need to scroll up to see what the content is about.

Table of contents

  1. 1. The fixed sidebar
    1. 2. Make sidebar fixed with position: sticky
      1. 3. Demo

        1. The fixed sidebar

        Recently I made changes to a blog template.

        Normally, there were two columns in the template: one displays the main entry content and the other is a sidebar of about 1/3 of the page.

        Originally, the sidebar is static and it would not make any move when visitors scroll to the end of the page. This makes the sidebar look empty if the blog content is really really long.

        static sidebar into float sidebar
        A static sidebar leaves a lot of space in a page if the main content is long.

        So, I would like to make it float, so that the sidebar could increase web engagement and to make the blog post looks balanced even though the readers will scroll down a lot.

        The plan for a floating sidebar is:

        • The sidebar content does not follow yet when people visit the site.
        • When people scroll down to a section (maybe the starting point of the blog entry content), sidebar becomes fixed.
        • After people pass the content blog and come to other section, for example the footer, sidebar stops following and stay within the blog entry section.

        Sounds good? Let’s continue

        2. Make sidebar fixed with position: sticky

        Earlier, I thought that we can make a sidebar fixed with position: fixed.

        But it would be complicated in this situation. Not like a Shopping cart or Buy button, a sidebar is quite a relative element of a website. It would be weird if the sidebar with social channels icons or advertising stays fixed all the time. So it is better to make it fixed only within a section.

        With position: fixed, we have to include a lot of CSS and JavaScript to make sure it starts becoming fixed after reaching a milestone.

        But for position: sticky, things are much more easier. The difference between fixed and sticky is that the sticky only fixed within an element in which it is related to.

        Simple version:

        HTML:

        HTML

        CSS:

        CSS

        So the important things are:

        • Set a top and bottom
        • Cross-browser safety with position: sticky.

        3. Demo

        For simple live demo and modification, please visit here: See floating sidebar live demo from JSFiddle.

        In the Fiddle, I use Bootstrap. So, the CSS of Bootstrap already included. Link to Bootstrap CSS CDN.

        Result (I also change something else, so you will see the sidebar content also changes compared to the early image):

        fixed sidebar, floating sidebar
        A floating sidebar always stays within attention.

        I hope this post help. Any questions or improvement recommendations please leave in the comment section. Thank you for reading!

        Filed Under: Front-end Tagged With: css, html

        Recent posts

        WordPress: Create custom post type programmatically

        [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

        Mangools Review: A Productive SEO tool for The Affiliates

        Reader Interactions

        You are here: Home / Front-end / [CSS] Fixed sidebar when scrolling: Use position Sticky

        Leave a Reply Cancel reply

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

        Primary Sidebar

        Hello! My name is Anh. I am a front-end developer in Oulu, Finland. Currently, I work with PHP, HTML, CSS, JavaScript and love writing about them. Please feel free to join the discussion!

        FOLLOW MY BLOG

        Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.