Nested div within another div, shifting position relative to scrolling (React)

My goal is to create a unique effect where an object falls from the sky as the user scrolls down the page. The concept involves having the object div remain stationary in the center of its parent container, positioned 50 pixels from the top. However, when the user scrolls down, the object should also move downward accordingly.

The challenge: The object resides within another div, and I want it to be visible only within that specific container, not throughout the entire website.

What have I experimented with? 1: Attempted fixed positioning, but this caused the object to appear on the entire page since z-index doesn't function properly with fixed elements. 2: Tried relative positioning on the parent element and absolute positioning on the child, but unfortunately, this setup prevented the object div from scrolling alongside the page.

For reference, here's a visual representation: https://i.sstatic.net/jaNzw.png

Desired scroll effect: https://i.sstatic.net/sqnnA.png

React Component Structure:

<div className="container">
      <div className="container--object">
          <img src={object}/>
      </div>
</div>

CSS Styling:

.container {
  min-height: 100vh;
  position: relative;
}

.container--object {
  position: absolute;
  top: 50px;
}

The parent component for this setup is the homepage, with other divs serving as siblings to this React component. My current struggle lies in achieving the movement of the object div as the user scrolls down the page. Is there a way to anchor its position based on the browser's viewport, allowing it to smoothly transition downwards?

Answer №1

Yes, it seems like you are looking for something along these lines. I have incorporated an image and some sample text.

.container {
  min-height: 100vh;
  height: 2500px;
  position: relative;
}

.container_object {
  position: fixed;
  top: 50px;
}
<div class="container">
      <div class="container_object">
          <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
      </div>
      <div style="position: absolute; top:500px">
        TESTING 111111111
      </div>
      
      <div style="position: absolute; top:800px">
        TESTING 222222222
      </div>
</div>

This code snippet should be displayed on a full page view.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Postpone the execution of the toggleClass function

I have a tab that, when clicked, fades in to reveal content loaded with AJAX. However, the content loads immediately upon clicking the button. I attempted to use toggleClass with delay, but it was unsuccessful. How can I effectively delay the loading of t ...

The functionality of the "enter" key is disabled in the textarea of Internet Explorer 8

Pressing enter in a textarea with the nowrap whitespace attribute set through CSS does not create a new line in IE8. Instead, just a simple whitespace appears. Other browsers like Opera, Chrome, and Firefox do not have this issue. Any solutions for this pr ...

a table in HTML with cells positioned in the center

My requirement is for a table with one row and 5 cells. The first/left cell should be left justified, the last/right cell should be right justified, and the middle 3 cells should be centered with equal spacing between them. The table itself has a "100% wid ...

Problem with the overflow setting of a specific div

My website is currently hosted on a test server at medexcel.comeze.com. However, I am encountering an issue where the overflow of the top div is no longer hidden when I hover over a menu button in the top bar. This results in the bottom right corner of th ...

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

"Learn the process of toggling the visibility of multiple objects by passing props from child components to parent components and

My approach to design is quite straightforward. I have a sidebar in child components (Aside.js) and a Main object that displays content (Main.js), all of which are used in ImportPage. In Aside, I have three buttons that I want to use to show and hide conte ...

Transforming a JSON file into a new JSON file using an alternative method in React

I have a JSON data structure similar to this example: [ { "quantity": "200", "prodType": "stock", "symbol": "LOL", "prodDesc": "Εθνική τράπεζα", "market": "Greece", "averageCost": "131,16", ...

Problematic response design

On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...

Adding an image to a jQuery class name on the fly

I am attempting to add an image before a div by using its className with jQuery. function insertImage(obj) { var dynamicClass = $(obj).prop("className"); After retrieving the classname, I now encapsulate it in single quotes and add a dot to access t ...

Using a conditional statement within a .map function in NextJS

I'm trying to figure out how to incorporate the .map function into my if statement. Essentially, I want it to display "Featured On:" followed by a list of videos if they have been featured in one. { data.directory.videos ? <h2>Featured On:&l ...

Struggling to create a multilevel drop-down menu with bootstrap that activates on hover

ul { list-style-type: none } .navbar-nav:hover .secondDropdown{ display:block; } .navbar-nav .secondDropdown{ display:none; } .navbarDropdown2{ display:none; } .dropdown-toggle:hover .navbarDropdown2 { display: block; } .dropdown-item:ho ...

Tips for centering a horizontal unordered list within a division element

I can't seem to figure out why the text-align center isn't working. I've followed other tutorials and applied the textalign: center to the div, then added display: inline to the ul. Below is a sample of my HTML code from the browser as I am ...

Using jQuery to animate the grayscale filter with a value of 0

Currently, I am implementing the Waypoints jQuery plugin to add animation to a series of images as a user scrolls over them. My goal is to apply certain CSS properties - opacity:1, filter:grayscale(0), -webkit-filter:grayscale(0), and -moz-filter:grayscale ...

Guide to configuring an Angular Material Footer using Flex-Layout

Could someone help me with setting up the footer in my Angular Material app? I want it to: stick to the bottom when the content height is smaller than the view-port move down or get pushed down when the content height exceeds the view-port One important ...

saving the JSON information for dropdown options within a variable

Greetings everyone I have successfully retrieved the options for my select tag in json format and used this code to populate the select tag: var mySelect = $('#'+select_id) $.each(response, function(key,val){ $('<option/>&apo ...

Building vue js logic to manage state across multiple ul li elements

I have a situation where I have an unordered list with a static number of list items (menu elements) that are rendered on the server side. I need to add some state-based logic to each list item, such as changing the color of the active item and expanding ...

What is the best way to target an HTML attribute using jQuery?

I have customized a Textbox by adding a special attribute: <asp.TextBox MyCustomAttribute="SomeValue"><asp.TextBox> Now, I want to retrieve this value from within an AJAX success function. Please note that I have excluded irrelevant attribut ...

Automatically updating the results section while executing SQL queries in PHP

Here is a JavaScript/Ajax code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready (function () { var updater = se ...

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

Creating a custom styled-component in Typescript for rendering {props.children}

One of my components is called ExternalLink which is used to display anchor tags for external URLs. This component has been styled using styled-components. Check out the CodeSandbox demo here ExternalLink.tsx This component takes an href prop and render ...