How to make div fixed after scroll to that div ?

Last Updated : 29 Dec, 2023

In this article, we will see how to make a div fixed after you scroll to it by using the position property with a sticky value. This effect is generally used on websites when an important message needs to be shown. Set the property position to sticky to create elements that behave as fixed positions whenever the user scrolls to that position.

Fixing the Div after scrolling using position: sticky

In the HTML file create a div that you want to make fixed on scroll.
Apply the sticky property to a div in the CSS file.
Here, the property position is set to the sticky to the specified element making the div named “sticky” fixed after you scroll to that div.
Apply the position using top, bottom, left, or right properties according to position where it should be fixed.

Example 1: The below code is for designing a page where the div is fixed on scrolling to it.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <style> 
        .container { 
            height: 1500px; 
        } 
  
        .sticky { 
            position: sticky; 
            top: 20px; 
            background-color: rgb(32, 165, 20); 
            color: white; 
            padding: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <p>Please Scroll down</p> 
        <div class="sticky"> 
            <p>This div will be fixed after scrolling to it</p> 
        </div> 
        <p> 
            Web Design is a field related to designing 
            websites on the Internet. Without a good design, 
              a website fails to perform well and cannot produce 
            a good impact on the user. Design is a creative  
              process that affects the ranking of the brand.  
            A good website design helps to create an engaging  
            online presence that captivates the audience. Each  
            distinct day gives you an opportunity to learn, 
            progress, and do the things that push you toward  
            your goals or that make you satisfied at the end of 
            the day. Web Design helps to make your web pages stand 
            out in terms of design and user experience. It 
            integrates technical and creative skills, by which 
            you can build and maintain web pages very easily. 
        </p> 
    </div> 
</body> 
  
</html>

Output:

scrollre

Fixing the Div after scrolling using position: fixed

In the HTML file create a div that you want to make fixed on scroll.
For Defining the styles for the sticky div element named “sticky”. Sets the position to fixed, making it stick to the top of the viewport after scrolling to a certain point.
Set top to 20px positions the sticky div 20 pixels from the top and set width to 100vw makes the div full width of the viewport.
Set the margin-bottom to 20px adds spacing below the fixed div.

Example 2: The below code is for designing a page where the div is fixed on scrolling to it.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <style> 
        .container { 
            height: 1500px; 
        } 
  
        .sticky { 
            position: fixed; 
            top: 20px; 
            width: 100vw; 
            height: 25px; 
            font-weight: 700; 
            background-color: rgb(155, 204, 32); 
            color: white; 
            padding-bottom: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <p>Please Scroll down</p> 
        <div class="sticky"> 
            <p>This div will be fixed 
                after scrolling to it 
            </p> 
        </div> 
        <p> 
            Web Design is a field related to designing 
            websites on the Internet. Without a good 
            design, a website fails to perform well 
            and cannot produce a good impact on the 
            user. Design is a creative process that 
            affects the ranking of the brand. A good 
            website design helps to create an engaging 
            online presence that captivates the audience. 
            Each distinct day gives you an opportunity 
            to learn, progress, and do the things that 
            push you toward your goals or that make you 
            satisfied at the end of the day. Web Design 
            helps to make your web pages stand out in 
            terms of design and user experience. 
            It integrates technical and creative skills, 
            by which you can build and maintain web pages 
            very easily. 
        </p> 
    </div> 
</body> 
  
</html>