Listening for scrolling events along with a sticky element whose height changes can lead to a glitchy never-ending scroll experience

Question

Listening for scrolling events along with a sticky element whose height changes can lead to a glitchy never-ending scroll experience

I am facing an issue with an element positioned at the top of the screen using position:sticky;. I have implemented a JS scroll eventlistener to add a stuck class when the element becomes stuck (scroll Y is greater than 0).

The presence of the stuck class causes an element inside the sticky element, which has CSS transition, to decrease in height.

However, scrolling very slowly results in the height change causing the scrollY to suddenly jump back to zero, removing the stuck class. This creates a jolty scrolling loop that continues infinitely until you scroll faster and outscroll the problem.

I am seeking advice on how to achieve smooth scrolling when using position: sticky. You can view the issue live here:

https://jsfiddle.net/27rzba5v/

javascript css addeventlistener sticky

Answer 1

Answer №1

To address this issue, consider modifying the element's height with a transform on .wrap instead of transitioning directly. This approach leverages the GPU for smoother animations without causing the browser to repaint unnecessarily.

var lastScrollY = 0;
var ticking = false;

window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );

body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
  transition: 0.5s; /* Move transition here */
  transform-origin: top left; /* Ensure proper transformation origin */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Apply transformation to wrap instead of block */
transform: scaleY(.5); /* Adjust scale instead of height */
}

<div class="wrap">
<span class="block"></span>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<!-- Additional content can be included as needed -->

If transitioning the element's height is necessary, you can mitigate dimension changes by using a buffer container for offsetting effects.

var lastScrollY = 0;
var ticking = false;

window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );

body {
margin: 0;
}
.wrapoffset { /* Introduce new sticky element for containment */
  height: 80px;
  position: sticky;
  top: 0;
  width: 100%;
}
.wrap {
background: #666;
text-align: center;
  width: 100%;
}
.block {
  height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}

<div class="wrapoffset"> 
  <div class="wrap">
    <span class="block"></span>
  </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<!-- Additional content can be included as needed -->

To further optimize performance, explore using IntersectionObserver with a polyfill rather than relying solely on scroll events.

Answer 2

To address this issue, consider modifying the element's height with a transform on .wrap instead of transitioning directly. This approach leverages the GPU for smoother animations without causing the browser to repaint unnecessarily.

var lastScrollY = 0;
var ticking = false;

window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );

body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
  transition: 0.5s; /* Move transition here */
  transform-origin: top left; /* Ensure proper transformation origin */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Apply transformation to wrap instead of block */
transform: scaleY(.5); /* Adjust scale instead of height */
}

<div class="wrap">
<span class="block"></span>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<!-- Additional content can be included as needed -->

If transitioning the element's height is necessary, you can mitigate dimension changes by using a buffer container for offsetting effects.

var lastScrollY = 0;
var ticking = false;

window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );

body {
margin: 0;
}
.wrapoffset { /* Introduce new sticky element for containment */
  height: 80px;
  position: sticky;
  top: 0;
  width: 100%;
}
.wrap {
background: #666;
text-align: center;
  width: 100%;
}
.block {
  height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}

<div class="wrapoffset"> 
  <div class="wrap">
    <span class="block"></span>
  </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<!-- Additional content can be included as needed -->

To further optimize performance, explore using IntersectionObserver with a polyfill rather than relying solely on scroll events.

Listening for scrolling events along with a sticky element whose height changes can lead to a glitchy never-ending scroll experience

Answer №1

Similar questions

Send information and showcase it on the following screen using ReactJS

Can I inform the interpreter that my function in TypeScript specifically handles undefined and null values?

Using *ngFor index value results in an error message saying "The call stack size has reached its maximum limit."

The Discord.js script fails to send embedded messages as intended

Learn how to troubleshoot and resolve a bug in the mobile Chrome browser that pertains to the position fixed feature

Adjusting the spaces between the grid elements in Bootstrap 3 to improve the

Detecting changes to DOM elements without using jQueryResponding to DOM element

Displaying content on the <div> element

Unable to load page redirection

"Using the fetch Prototype.json() method can lead to the alteration or corruption of the

Cut off a string from the start

Mirror the input text to another input within a for loop

limit mongoose search results to a specific year

Leveraging Vue js components while utilizing it from a content delivery network (CDN

The persistent presence of the Dropup Bootstrap class ensures that it remains active and visible at all

What is the best way to locate the position of an element within an Array with underscore.js?

What are some solutions for managing SubPixel Handling issues on an iPhone?

Utilizing HTML5 to showcase the techniques of character creation in writing

Tips for exchanging JavaScript variables with PHP using AJAX

Create custom dynamic asset tags in AngularJS inspired by Mixture.io's features for seamless HTML templating