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

Capturing a variety of input values from a form and storing them in an array

Tips for updating property values when calling a TypeScript function

Positioning html images to overlap each other without losing the ability to click

Storing input data in a JavaScript array instead of sending it through an AJAX request

Ensure that two elements containing content of varying width are equal in width

Use of number type input on mobile devices in HTML

Instructions on utilizing sockets for transmitting data from javascript to python

Approximately 20% of spoken words are not accurately conveyed by Speech Synthesis Google Voices, failing to adhere to the intended voice selection

Can someone provide instructions on how to convert base64 data to an image file

Running two servers at the same time using nodemon might seem complex, but it

Transitioning with an ellipsis

Discover the method for retrieving information through AJAX requests and dynamically displaying or hiding content based on the received

Dealing with Laravel and AJAX - Issue with Loading DIV

The created function in VueJS may sometimes result in an undefined outcome

Navigating to a Specific Section with a Fixed Header on Another Page

The result from the AngularJs promise is coming back as undefined

I am interested in displaying all the items on the list instead of just one

What is the best way to conceal all input elements in a form?

A perfectly organized and justified menu with evenly spaced horizontal list items

Retrieve information and auto-fill text boxes based on the selected dropdown menu option