Adjusting the visibility of a div as you scroll

Question

Adjusting the visibility of a div as you scroll

I'm trying to achieve a fade-in and fade-out effect on div elements when scrolling over them by adjusting their opacity. However, I'm facing difficulties in getting it to work properly.

The issue lies in the fact that my div elements are positioned in the middle of the page rather than at the top, so using scrollTop doesn't seem to be the right approach, right?

var fade = $('.b_wrapper');
var range = 400;

$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  fade.each(function() {
    var offset = $(this).offset().top;
    var height = $(this).outerHeight();
    offset = offset + height / 1;
    
    $(this).css({
      'opacity': 1 - (st + offset - range) / range
    });
  });
});

.content {
  height: 100px;
}

.b_wrapper {
  background: lightgreen;
  margin-top: 40px;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="content"></div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>
<div class="b_wrapper">
  <p>this is a div</p>
</div>

(Check out the JsFiddle here)

javascript html jquery css

Answer 1

Answer №1

If you want to monitor changes in the intersection between a target element and its ancestor or the viewport, you should consider using the Intersection Observer API. This API keeps an eye on these intersections and triggers a callback when certain thresholds are met.

To start, initialize a new observer with specific options:

let options = {
  root: null,
  threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}
let observer = new IntersectionObserver(callback, options);

root can refer to either the containing ancestor element (e.g., selected using document.querySelector()) or the viewport by setting it to null.
threshold is an array of values that represent different levels of intersection ratios. When an element's intersection ratio matches one of these values, the callback function is invoked, allowing you to adjust the element's opacity directly based on this ratio.

After setting up the options, make sure to add each target element to the observer:

for (const target of document.querySelectorAll('.b_wrapper')) {
    observer.observe(target);
}

The callback function simply sets the opacity of watched elements based on their intersection ratio with the viewport:

let callback = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio
  });
};

This should give you a good starting point. For more information and examples, consult the API documentation.

Answer 2

If you want to monitor changes in the intersection between a target element and its ancestor or the viewport, you should consider using the Intersection Observer API. This API keeps an eye on these intersections and triggers a callback when certain thresholds are met.

To start, initialize a new observer with specific options:

let options = {
  root: null,
  threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}
let observer = new IntersectionObserver(callback, options);

root can refer to either the containing ancestor element (e.g., selected using document.querySelector()) or the viewport by setting it to null.
threshold is an array of values that represent different levels of intersection ratios. When an element's intersection ratio matches one of these values, the callback function is invoked, allowing you to adjust the element's opacity directly based on this ratio.

After setting up the options, make sure to add each target element to the observer:

for (const target of document.querySelectorAll('.b_wrapper')) {
    observer.observe(target);
}

The callback function simply sets the opacity of watched elements based on their intersection ratio with the viewport:

let callback = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio
  });
};

This should give you a good starting point. For more information and examples, consult the API documentation.

Answer 3

Answer №2

Perhaps not the most optimal approach, but here is my attempt:

When scrolling, I determine which element is the most centered on the screen
Upon window resize, I update the center of the screen value

let centerOfScreen = window.innerHeight / 2;
let pageScroll;
let closestCenteredDivPosition = 999999;
let currentIndex;

let wrappers = document.getElementsByClassName("wrapper");
let positions = [];
for (let e of wrappers) {
  positions.push(e.offsetTop + e.offsetHeight / 2);
}

highlightMostCenteredDiv = () => {
  pageScroll = document.documentElement.scrollTop || document.body.scrollTop;
  let currentValue;
  for (let i = 0; i < positions.length; i++) {
    currentValue = Math.abs(positions[i] - centerOfScreen - pageScroll);
    if (closestCenteredDivPosition > currentValue) {
      closestCenteredDivPosition = currentValue;
      currentIndex = i;
    }
  }
  if (!document.querySelector(".current")) {
    wrappers[currentIndex].classList.add("current");
  } else {
    if (wrappers[currentIndex] != document.querySelector(".current")) {
      document.querySelector(".current").classList.remove("current");
      wrappers[currentIndex].classList.add("current");
    }
  }
  closestCenteredDivPosition = 999999;
}

highlightMostCenteredDiv();

document.addEventListener("scroll", highlightMostCenteredDiv)

window.addEventListener("resize", () => {
  centerOfScreen = window.innerHeight / 2;
})

body {
  margin: 0;
}

.wrapper {
  background-color: orange;
  height: 100px;
  width: 100%;
  margin: 50px 0;
  opacity: 0.3;
  transition: opacity 1s ease;
}

.current {
  opacity: 1;
}

<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>

Answer 4

Perhaps not the most optimal approach, but here is my attempt:

When scrolling, I determine which element is the most centered on the screen
Upon window resize, I update the center of the screen value

let centerOfScreen = window.innerHeight / 2;
let pageScroll;
let closestCenteredDivPosition = 999999;
let currentIndex;

let wrappers = document.getElementsByClassName("wrapper");
let positions = [];
for (let e of wrappers) {
  positions.push(e.offsetTop + e.offsetHeight / 2);
}

highlightMostCenteredDiv = () => {
  pageScroll = document.documentElement.scrollTop || document.body.scrollTop;
  let currentValue;
  for (let i = 0; i < positions.length; i++) {
    currentValue = Math.abs(positions[i] - centerOfScreen - pageScroll);
    if (closestCenteredDivPosition > currentValue) {
      closestCenteredDivPosition = currentValue;
      currentIndex = i;
    }
  }
  if (!document.querySelector(".current")) {
    wrappers[currentIndex].classList.add("current");
  } else {
    if (wrappers[currentIndex] != document.querySelector(".current")) {
      document.querySelector(".current").classList.remove("current");
      wrappers[currentIndex].classList.add("current");
    }
  }
  closestCenteredDivPosition = 999999;
}

highlightMostCenteredDiv();

document.addEventListener("scroll", highlightMostCenteredDiv)

window.addEventListener("resize", () => {
  centerOfScreen = window.innerHeight / 2;
})

body {
  margin: 0;
}

.wrapper {
  background-color: orange;
  height: 100px;
  width: 100%;
  margin: 50px 0;
  opacity: 0.3;
  transition: opacity 1s ease;
}

.current {
  opacity: 1;
}

<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>
<div class="wrapper"></div>

Adjusting the visibility of a div as you scroll

Answer №1

Answer №2

Similar questions

Display the React component following a redirect in a Next.js application that utilizes server-side rendering

Tips for creating a textarea element that resembles regular text format

Tips for styling a React JS component class

The Angular modal feature is specifically designed to function exclusively within the index.html

JavaScript code not functioning properly when accessing all information retrieved from Django Model

Verify if the contract address corresponds to a token and retrieve the token details, such as its symbol

Encountering an issue in React: unable to establish properties for null

Experiencing issues with my site's display due to unwanted code plaguing the

Enable my textbox to interpret the html img tag

The react-transition-group fails to function properly until the page is reloaded

Discovering a particular string within a jQuery array object: Tips and tricks

AngularJs is not responsive to sending POST requests with hidden <input> values

What is the best way to insert a new item into an array that is nested within an object?

Creating a canvas texture on tube geometry with three.js for optimal display on iPad devices

Creating a nested tree structure array from a flat array in Node.js

Where should data processing be conducted: in the service or controller layer?

Why are the UI components (`Card Number`, `MM/YY`, `CVC`) not being displayed in the React app when using Card

Issue with Xampp causing server side PHP script to malfunction

The behavior of the jQuery click function seems to be quirky and not functioning as expected. Additionally, the

Using TypedArray as a parameter in a Cordova plugin