Difference between Position: fixed and Position:sticky.

The Position property in CSS is used to determine the position of an HTML element on the viewport. This can be set using top, right, bottom and left properties to specify the distance of the HTML element from the edge of the viewport.

Position properties are fixed, static, relative, absolute and sticky. In this tutorial I’ll clarify on the differences between the fixed and static properties.

Position: fixed;

As the name goes, position: fixed means fixed to the viewport therefore elements with fixed position will always stay at the given position regardless of what maybe happening to other elements for example scrolling.

The element in this case has no defined space on the page and will be positioned over or under other elements. Position values of top, bottom, right, or left are used to determine where the element stays and a z-index can also be used to place the element above or below other elements.

Position: sticky;

An element with position: sticky behaves like any other regular element but when the page is scrolled, it will scroll until it reaches a given offset value and then stays in its position. This element takes up space on the page and when you scroll, the original space where it was will be left empty.

Also a sticky element always stays within its parent block and as soon as the parent block leaves the screen as an effect of scrolling, the sticky element will also leave.

Main differences between position: fixed and position: sticky CSS properties.

Position: fixedPosition: sticky
Element is fixed to the viewport and doesn’t move irrespective of scrolling.Element can scroll to an offset value provided by the user.
Element never leaves the viewport position it was fixed to.Element leaves the viewport when its parent element scrolls off the viewport.
Element does not take up additional space on page therefore has no effect on other elements’ flow on the page.Element takes up additional space on page which affects other elements’ flow on the page.

Browser Support:
Position: fixed property is supported by all the browsers while Position: sticky is only supported by modern browsers.

The code below gives an example of how these two properties are used. 

<html>
<head>
    <style>
    body {
        margin: 0;
        padding: 20px;
        font-family: sans-serif;
        background: #efefef;
        display: flex;
    }
    .col {
  width: 50%;
}
 
.content {
  background: #B5B5B5;
  height: 300px;
  margin: 1em;
}

.content.top {
  height: 100px;
}

.box {
  width: 250px;
  height: 100px;
  background: #91E5FC;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
  top: 0;
}  
    
    </style>
</head>
  
<body>
<div class="col">
      <div class="content top"></div>
      <div class="content">
        <div class="box fixed">Fixed</div>
      </div>
      <div class="content"></div>
      <div class="content"></div>
      <div class="content"></div>
</div>
<div class="col">
      <div class="content top"></div>
      <div class="content">
        <div class="box sticky">Sticky</div>
      </div>
      <div class="content"></div>
      <div class="content"></div>
      <div class="content"></div>
</div>
</body>
</html>

From the example above, you observe that the fixed element stays in one place when you scroll up or down while the sticky element moves within its parent block until the set point and stays there but as you continue to scroll, it goes away as the parent block leaves the viewport.

Application.

The position: sticky property is mostly used for creating sticky navigation menus at the top of the page. This helps to easily access other pages without having to scroll back to the top of the current page.

Position: fixed is mostly used for placement of call to action elements like social media widgets, signup forms and advertisements that can keep stuck to the sides or bottom edge of the screen.