ADVERTISEMENT
ADVERTISEMENT

How can I make a div stick to the top of the screen once it's been scrolled to?

Learn, how to make a div stick to the top of the screen once it's been scrolled to using CSS?
Submitted by Apurva Mathur, on June 19, 2022

Position Property: Position property is a type of CSS property that is used to set the position of HTML content. This HTML content can be anything including text, links, background images, etc.

It has the following values: static, relative, fixed, sticky, and absolute. To stick the div to the top of the screen, we can use position:"sticky" and position:"fixed" property.

position:"sticky": Position sticky property sticks the element when it reaches a specific point. This specific point can be anything for example in the code given below I have given top: 2px; so when it reaches where top=2px; it will stick.

Example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         div{
         position:sticky;
         background-color: #b3d4fc;
         top: 2px;
         }
      </style>
   </head>
   <body style="height: 1000px">
      <div>This content will stay here</div>
      <pre style="font-size: 20px;">The first ever computer was invented in the 1820s
by Charlse Babbage.However the first electronic digital computer were developed
between 1940 and 1945 in the United States and in the United Kingdom.
They were gigantic, originally the size of a large room,
and also need to be supply a large amount of power source which is equivalent
as several hundred modern personal computers.
The history of computer hardware covers the developments from simple devices to
aid calculation, to mechanical calculators, punched card data processing and on to modern stored program computers.
The tools or mechanical tool used to help in calculation are called calculators while the machine operator
  that help in calculations is called computer.
</pre>
   </body>
</html>

Output:

Example: make a div stick to the top of the screen

In the above code, I've given position:"sticky" property to the specified div and top=2px; so that it will stick the div at top=2px. You can try to change the value and you’ll observe that the div will become sticky when that specific value is hit.

(It's important to maximize your screen height only then you’ll able to see the scrollable effect.)

We can also use position:"fixed" it will also give the same result, the only difference between their working is that when position:"fixed" is used it does not require any specific threshold value; it will just simply fix the element wherever you want.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.