Place the child atop the stacked blocks

Question

Place the child atop the stacked blocks

I need the .square div to always remain at the top, creating a visual effect where it appears as if the following section with its own .square is sliding up and the .square halts precisely at the position of the previous section's square.

The code snippet below achieves this effect:

$(document).ready(function() {
  const sections = document.querySelectorAll('.make-sticky');

  // Intersection Observer
});
});

.scrollable {
  border: 5px solid red;
  position: relative;

    // CSS Styling for sticky elements

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
        <div class="scrollable">
            <section class="make-sticky" style="background: cyan" id="section1">
                <div class="line"></div>
                <div class="square"></div>
                <p>Lorem ipsum dolor sit amet...</p>
            </section>

            // Additional Sections

        </div>

However, the next section covers the previous square when it "slides up". Despite no z-index being defined on any parent element of my code, using it still does not resolve the issue.

What steps can be taken to address this problem and ensure proper functionality?

https://i.sstatic.net/61zFZWBM.png

https://i.sstatic.net/repRn5kZ.png

javascript html jquery css z-index

Answer 1

Answer №1

I included a "floating-square" element that appears when the initial "make-sticky" section reaches the top of the window and disappears when the last section does the same.

$(document).ready(function() {
  const sections = document.querySelectorAll('.make-sticky');
  const floatingSquare = $('.floating-square');
  let scrollingDown = true;

  // Function to update floatingSquare visibility
  function updateFloatingSquareVisibility() {
    const firstSection = sections[0];
    const lastSection = sections[sections.length - 1];

    const firstSectionRect = firstSection.getBoundingClientRect();
    const lastSectionRect = lastSection.getBoundingClientRect();

    if (scrollingDown) {
      if (firstSectionRect.top <= 0) {
        floatingSquare.show();
      }
      if (lastSectionRect.top <= 25) {
        floatingSquare.hide();
      }
    } else {
      if (lastSectionRect.top > 25) {
        floatingSquare.show();
      }
      if (firstSectionRect.top > 0) {
        floatingSquare.hide();
      }
    }
  }

  // Intersection Observer to monitor sections
  const observer = new IntersectionObserver(entries => {
    entries.forEach(({ target, isIntersecting }) => {
      if (isIntersecting) {
        $(target).addClass('sticky-section');
      } else {
        $(target).removeClass('sticky-section');
      }
    });
  }, {
    root: null,
    rootMargin: '0px',
    threshold: [0, 0.25] // Trigger when 25% of the element is visible
  });

  sections.forEach((section) => {
    observer.observe(section);
  });

  // Event listener for scroll to determine scroll direction
  let lastScrollTop = 0;
  $(window).on('scroll', function() {
    const scrollTop = $(this).scrollTop();
    scrollingDown = scrollTop > lastScrollTop;
    lastScrollTop = scrollTop;
    updateFloatingSquareVisibility();
  });

  // Initial check for visibility
  updateFloatingSquareVisibility();
});

.scrollable {
  border: 3px solid darkblue;
  position: relative;

  .make-sticky {
    position: relative;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    margin-top: -22px;
    z-index: 1;

    .line {
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: black;
    }

    ......(more CSS code)

</div>

Answer 2

I included a "floating-square" element that appears when the initial "make-sticky" section reaches the top of the window and disappears when the last section does the same.

$(document).ready(function() {
  const sections = document.querySelectorAll('.make-sticky');
  const floatingSquare = $('.floating-square');
  let scrollingDown = true;

  // Function to update floatingSquare visibility
  function updateFloatingSquareVisibility() {
    const firstSection = sections[0];
    const lastSection = sections[sections.length - 1];

    const firstSectionRect = firstSection.getBoundingClientRect();
    const lastSectionRect = lastSection.getBoundingClientRect();

    if (scrollingDown) {
      if (firstSectionRect.top <= 0) {
        floatingSquare.show();
      }
      if (lastSectionRect.top <= 25) {
        floatingSquare.hide();
      }
    } else {
      if (lastSectionRect.top > 25) {
        floatingSquare.show();
      }
      if (firstSectionRect.top > 0) {
        floatingSquare.hide();
      }
    }
  }

  // Intersection Observer to monitor sections
  const observer = new IntersectionObserver(entries => {
    entries.forEach(({ target, isIntersecting }) => {
      if (isIntersecting) {
        $(target).addClass('sticky-section');
      } else {
        $(target).removeClass('sticky-section');
      }
    });
  }, {
    root: null,
    rootMargin: '0px',
    threshold: [0, 0.25] // Trigger when 25% of the element is visible
  });

  sections.forEach((section) => {
    observer.observe(section);
  });

  // Event listener for scroll to determine scroll direction
  let lastScrollTop = 0;
  $(window).on('scroll', function() {
    const scrollTop = $(this).scrollTop();
    scrollingDown = scrollTop > lastScrollTop;
    lastScrollTop = scrollTop;
    updateFloatingSquareVisibility();
  });

  // Initial check for visibility
  updateFloatingSquareVisibility();
});

.scrollable {
  border: 3px solid darkblue;
  position: relative;

  .make-sticky {
    position: relative;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    margin-top: -22px;
    z-index: 1;

    .line {
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: black;
    }

    ......(more CSS code)

</div>

Answer 3

Answer №2

To achieve this effect, you can start by creating a separate container using the div tag to hold all the squares or headers. This container should cover the entire scrollable area within your layout. Then, utilize the margin property on each square to align it correctly with its corresponding section.

In order to ensure that the squares adjust automatically when the height of the sticky sections changes, custom CSS variables are utilized. By updating the height variable, the positioning of the squares will be maintained without manual adjustments.

Given that the squares are meant to be in sequence and overlap accordingly, there is no need for the use of z-index. However, if you desired specific overlapping behavior, z-index could be applied as necessary.

Keep in mind that when using position: sticky, left/right positioning becomes invalid once the element becomes "stuck." Therefore, rely on the margin properties to position the square elements effectively.

:root {
  --sticky-section-height: 100vh;
}

* {
  box-sizing: border-box;
}

.scrollable {
  border: 5px solid red;
  position: relative;
}

.make-sticky {
  height: var(--sticky-section-height);
  box-sizing: border-box;
  border-bottom: 1px solid green;
  padding: 10px;
  background-color: var(--clr);
  position: relative;
}

.line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: black;
}

.sticky-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
  border: 2px solid rgb(0, 21, 255);
}

.square {
  position: sticky;
  color: white;
  top: 0px;
  /* Margin used to position the element horizontally*/
  margin-left: 10px;
  margin-bottom: calc((var(--sticky-section-height) - 20px));
  width: 20px;
  height: 20px;
  background: black;
  border: 2px solid red;
  /* Adjust this percentage based on your design */
}

p {
  margin-top: 50vh;
  /* Center text vertically */
}

<div class="scrollable">

  <div class="sticky-container">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
  </div>

  <section class="make-sticky" style="--clr: green" id="section1">
    <div class="line"></div>
    <p>Lorem ipsum dolor sit amet</p>
  </section>

  <section class="make-sticky" style="--clr: orange" id="section2">
    <div class="line"></div>
    <p>Quod magni natus dignissimos</p>
  </section>

  <section class="make-sticky" style="--clr: cyan" id="section3">
    <div class="line"></div>
    <p>Quod magni natus dignissimos</p>
  </section>
</div>

Answer 4

To achieve this effect, you can start by creating a separate container using the div tag to hold all the squares or headers. This container should cover the entire scrollable area within your layout. Then, utilize the margin property on each square to align it correctly with its corresponding section.

In order to ensure that the squares adjust automatically when the height of the sticky sections changes, custom CSS variables are utilized. By updating the height variable, the positioning of the squares will be maintained without manual adjustments.

Given that the squares are meant to be in sequence and overlap accordingly, there is no need for the use of z-index. However, if you desired specific overlapping behavior, z-index could be applied as necessary.

Keep in mind that when using position: sticky, left/right positioning becomes invalid once the element becomes "stuck." Therefore, rely on the margin properties to position the square elements effectively.

:root {
  --sticky-section-height: 100vh;
}

* {
  box-sizing: border-box;
}

.scrollable {
  border: 5px solid red;
  position: relative;
}

.make-sticky {
  height: var(--sticky-section-height);
  box-sizing: border-box;
  border-bottom: 1px solid green;
  padding: 10px;
  background-color: var(--clr);
  position: relative;
}

.line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: black;
}

.sticky-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
  border: 2px solid rgb(0, 21, 255);
}

.square {
  position: sticky;
  color: white;
  top: 0px;
  /* Margin used to position the element horizontally*/
  margin-left: 10px;
  margin-bottom: calc((var(--sticky-section-height) - 20px));
  width: 20px;
  height: 20px;
  background: black;
  border: 2px solid red;
  /* Adjust this percentage based on your design */
}

p {
  margin-top: 50vh;
  /* Center text vertically */
}

<div class="scrollable">

  <div class="sticky-container">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
  </div>

  <section class="make-sticky" style="--clr: green" id="section1">
    <div class="line"></div>
    <p>Lorem ipsum dolor sit amet</p>
  </section>

  <section class="make-sticky" style="--clr: orange" id="section2">
    <div class="line"></div>
    <p>Quod magni natus dignissimos</p>
  </section>

  <section class="make-sticky" style="--clr: cyan" id="section3">
    <div class="line"></div>
    <p>Quod magni natus dignissimos</p>
  </section>
</div>

Answer 5

Answer №3

Not entirely sure if this is exactly what you had in mind, but it might bring you close to the solution.

.scrollable {
  border: 5px solid red;
  position: relative;
}

.make-sticky {
  position: relative;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: black;
}

.square {
  position: sticky;
  top: 25%;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid red;
  z-index: 10; 
}

.make-sticky p {
  margin-top: 50vh; 
}

<div className="scrollable">
    <section class="make-sticky" id="section1">
      <div class="line"></div>
      <div class="square"></div>
      <p>Lorem ipsum dolor sit amet</p>
    </section>

    <section class="make-sticky" id="section2">
      <div class="line"></div>
      <div class="square"></div>
      <p>Quod magni natus dignissimos</p>
    </section>

    <section class="make-sticky" id="section3">
      <div class="line"></div>
      <div class="square"></div>
      <p>Quod magni natus dignissimos</p>
    </section>
  </div>

Answer 6

Not entirely sure if this is exactly what you had in mind, but it might bring you close to the solution.

.scrollable {
  border: 5px solid red;
  position: relative;
}

.make-sticky {
  position: relative;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: black;
}

.square {
  position: sticky;
  top: 25%;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid red;
  z-index: 10; 
}

.make-sticky p {
  margin-top: 50vh; 
}

<div className="scrollable">
    <section class="make-sticky" id="section1">
      <div class="line"></div>
      <div class="square"></div>
      <p>Lorem ipsum dolor sit amet</p>
    </section>

    <section class="make-sticky" id="section2">
      <div class="line"></div>
      <div class="square"></div>
      <p>Quod magni natus dignissimos</p>
    </section>

    <section class="make-sticky" id="section3">
      <div class="line"></div>
      <div class="square"></div>
      <p>Quod magni natus dignissimos</p>
    </section>
  </div>

Place the child atop the stacked blocks

Answer №1

Answer №2

Answer №3

Similar questions

Using lazy loading and $ocLazyLoad for improved performance

Using Jquery to make multiple elements sticky and float

Showing nested routes component information - Angular

Issue with Jquery Date picker functionality on Master Page not functioning as expected

What can I do to keep my navbar on top of the slideshow?

Add C# iteration with JavaScript on ASP.NET directories

Close the ionicPopup by tapping anywhere

Issue with InversifyJS @multiInject: receiving an error stating "ServiceIdentifier has an ambiguous match"

Update Symfony form class to replace the HTML5 input type from "text" to "number"

Can Jest Vue handle loading dynamic imports for snapshot testing?

Using ajax to submit variables may not function properly

Obtaining the Camera's Position Relative to the Origin in Three.js

Ways to delete scheduled tasks in BreeJS

Ways to address the absence of the 'Access-Control-Allow-Origin' header on the requested resource

Building Vertical Tabs with external JS for loading custom visuals

The columns in CSS grid-template are refusing to change despite the media query code being applied and active

Interact with elements on a dynamically loaded webpage using Selenium WebDriver in Java

Creating custom functions within views using Sencha Touch 2

The functions domElement.getClientWidth() and domElement.getClientHeight() are returning a value of 0

Steps to properly insert an SVG into a button