Home »
CSS
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:
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 »