https://i.sstatic.net/LfHeT.png
Is there a way to make the "+01" element follow the image div while scrolling, but have it start moving downwards before reaching the top of the page? I am looking for a simple solution to achieve this effect.
https://i.sstatic.net/LfHeT.png
Is there a way to make the "+01" element follow the image div while scrolling, but have it start moving downwards before reaching the top of the page? I am looking for a simple solution to achieve this effect.
If I have grasped your question correctly, it seems like you are interested in achieving a sticky position. Find out more here
I've created an example inspired by your image. Take a look:
body {margin:0; padding:0; background-color:orange;}
.container {
position:relative;
margin:0 auto;
width:400px;
margin-top:20px;
margin-bottom:40px;
}
img {
width:100%;
display:block;
margin-top:-40px;
}
.number {
position:sticky;
top:30px;
margin-left:-40px;
font-size:40px;
color:#fff;
text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
font-weight:bold;
}<div class="container">
<div class="number">
+01
</div>
<img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">
</div>
<div class="container">
<div class="number">
+02
</div>
<img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">
</div>
<div class="container">
<div class="number">
+03
</div>
<img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">
</div>
<div class="container">
<div class="number">
+04
</div>
<img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">
</div>Here is an example similar to the one provided earlier, which I have personally worked on and would like to share.
body{
margin:0;
padding:0;
}
.container{
margin:0 auto;
height:250px;
width:100px;
margin-top:10px;
position:relative;
padding:0.05px;
}
.img{
width:100%;
height:100%;
position:absolute;
background-color:red;
}
h1{
position:sticky;
top:100px;
margin-top:50px;
}<body>
<div class="container">
<div class="img"></div>
<h1>01<h1>
</div>
<div class="container">
<div class="img"></div>
<h1>02<h1>
</div>
<div class="container">
<div class="img"></div>
<h1>03<h1>
</div>
<div class="container">
<div class="img"></div>
<h1>04<h1>
</div>
<div class="container">
<div class="img"></div>
<h1>05<h1>
</div>
</body>I came across this article: Add/remove class with jquery based on vertical scroll? However, I am struggling to implement it for multiple divs, each with their own unique classes that require adding and removing 1 class at different distances from the top. ...
I am working with an array of objects structured as a tree. I have a requirement to add a new property called "dateType" to the objects at the 3rd level. let tree = [ { id: 1, name: "parent1", children: [ { id: 2, ...
One issue I'm facing is with a large fixed header that covers the content when navigating to HTML id links. Is there a way to adjust the position slightly higher within an id section using CSS? ...
I have a list of user cards, and my task is: Clicking the "undo" button: will restore the last card that was deleted (using an array) Question 1: How can I create an array from the displayed cards list? Question 2: How do I restore the last deleted card? ...
I have inserted the <br/> and HTML tags into the HighChart titles. The style changes successfully appear in the chart view, but unfortunately, when exported as PNG or JPEG images, the text style fails to apply in the resulting images. To s ...
Absolute positioning is relative to a containing block that provides a positioning context, which defaults to the document. a) If absolute positioning is relative to the document, can we visualize the starting point of a document as a two-dimensional coor ...
I am currently facing an issue with passing data from an external file called data.js to the component for its usage. The error I'm encountering states that the data is not defined. Below is the content of my data.js file: const data = [ { cha ...
I have a script that uses document.write before the page loads to inject html into my page. However, this content gets heavily cached and only updates with a hard refresh. I know I shouldn't be using document.write, but for now, I need a quick soluti ...
I am in the process of designing a webpage that will be filled with multiple cards, utilizing the new card component in bootstrap 4. My goal is to incorporate a search bar that filters out cards based on their titles when a search query is entered. Check ...
I have a container with multiple divs and am utilizing the flexbox model. My goal is to achieve a specific layout using CSS without altering the order of the div tags. https://i.sstatic.net/jdAK6.png The desired outcome is to have the div with the value ...
I am currently facing a challenge in filtering products based on their sub child nodes within Firebase. This is how my data is structured: products/ product1 /author: 12345 /title: "Awesome" /description: "more awesome" ...
I am interested in querying the data using filters to check for existence. Does loopback support this method of querying? If so, could you provide some guidance? myModel.exists({where: {and: [{city: "London"}, {gender: "F"}]}}, function(err, bool){ if(bo ...
I have recently enhanced my website by adding a nodejs+socket.io based conversation server to it. This server is hosted on a separate AWS instance while the main website runs on HTTPS. However, I encountered an issue when trying to establish a socket conn ...
Considering the example below: var mat = new THREE.MeshLambertMaterial({'color': ..., 'map': ...}); How does changing the color affect the final appearance in situations where the color is set to the average pixel value of the map, wh ...
My goal is to add a background to both the image and the div itself, similar to what I've seen on Amazon. However, I'm struggling to achieve this effect where the white background of the image doesn't show when applied onto the div: Image w ...
For my current project, I am trying to add a bootstrap button with a small white box next to the main text containing additional text. If you need a visual reference, check out this image: Button example I have searched extensively for a solution but have ...
I am currently encountering an issue with my react native app. I have implemented a Pin code feature using @haskkor/react-native-pincode - npm. However, I am struggling to retrieve the value of the registered pin code from this npm package. My goal is to s ...
Currently, I am utilizing node js, mongoose, express, and mongodb for my project. I have developed a simple form where users can input their full name to search for additional details in the database. I am curious if it is feasible to conduct a search us ...
I'm facing an issue while fetching data on the client side in Astro - I keep receiving a cached response. From the endpoint located at src/pages/api/spotify.ts, this is what I'm sending: export const prerender = false; ... export const GET: APIR ...
I'm currently using Yii2-advanced-app and I have encountered an issue. I want to pass the selected value from a dropdown menu to a PHP code that displays a list with checkboxes on the same page. Here is an image for reference on what I am trying to ac ...