Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a sticky image with CSS?
On a web page, you must have seen a stick menu positioned on the top. With that, a sticky element can also be placed on a web page. Also, using the position property, we can also make an image sticky that would stick even when the web page is scrolled. Let us see how to create a sticky image with HTML and CSS.
Set the image
Place an image on a web page using the <img> element −
<img src="https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-mini-logo.jpg">
Add some text to make the scroll appear
Place some text after the image to let the scroll appear. We have added some random headings and text −
<p>Scroll down to see the effect</p> <h2>With Examples</h2> <h2>With Assignments</h2> <h2>With Codes</h2> <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>
Position the image sticky
Use the position property with the value sticky to position the image. To place it on the top, use the top property with the value 0
img {
position: sticky;
top: 0;
width: 300px;
height: 300px;
}
Example
The following is the code to create a sticky image with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: sticky;
top: 0;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Data Structures</h1>
<img src="https://www.tutorialspoint.com/data_structures_algorithms/images/data-structure-mini-logo.jpg">
<p>Scroll down to see the effect</p>
<h2>With Examples</h2>
<h2>With Assignments</h2>
<h2>With Codes</h2>
<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>
Updated on: 14-Dec-2023
1K+ Views
Advertisements