How to create a sticky image with CSS?

CSS Web Development Front End Technology

Following is the code to create a sticky image with CSS −

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
   position: sticky;
   top: 0;
   width: 300px;
   height: 300px;
}
</style>
</head>
<body>
<h1>Some header text</h1>
<img src="https://i.picsum.photos/id/721/400/400.jpg">
<h1>Some header text</h1>
<h1>Some header text</h1>
<h1>Some header text</h1>
<p style="font-size: 40px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat odio ratione officia quod qui blanditiis animi! Repudiandae culpa recusandae dolor id soluta porro commodi quidem, incidunt voluptatum vitae similique nesciunt obcaecati odit enim repellat doloribus. Explicabo quisquam in beatae earum?</p>
</body>
</html>

Output

The above code will produce the following output −

On scrolling down a little the image will stay at its place as shown in the below output −

AmitDiwan

Published on 08-Apr-2020 07:56:31

Previous Page Print Page