Transition in CSS did not work as expected when the class of the sticky element was

Question

Transition in CSS did not work as expected when the class of the sticky element was

My goal is to create a transition effect when an element becomes sticky on the page. However, I am facing issues with the current code that I have.

const content = document.querySelector('.contents');
const initalPos = content.offsetTop;

window.addEventListener("scroll", () => {
  if(content.offsetTop > initalPos) {
    content.classList.add('stuck');
  } else {
    content.classList.remove('stuck');
  }
});

body {
  height: 300vh;
}

.contents {
  margin-top: 50px;
  border: 1px solid black;
  position: sticky;
  top: 0;
  transition: height 3s;
}

.stuck {
  height: 100px;
  background-color: green;
}

<div class="contents">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</div>

I believe there might be something missing in correctly applying the CSS transition, can you help me identify what it is?

javascript html css css-transitions sticky

Answer 1

Answer №1

To enable the transition effect, it is necessary to have an initial fixed height set. However, if you prefer not to have this fixed height initially, you can programmatically set it after calculating it using the following approach:

const content = document.querySelector('.contents');
const initalPos = content.offsetTop;
content.style.height = content.clientHeight + 'px';

window.addEventListener("scroll", () => {
  content.classList.toggle('stuck', content.offsetTop > initalPos);
});

body {
  height: 300vh;
}

.contents {
  margin-top: 50px;
  border: 1px solid black;
  position: sticky;
  top: 0;
  transition: height 3s;
}

.stuck {
  height: 100px !important;
  background-color: green;
}

<div class="contents">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and <span style="color:red;">scrambled it to make a type specimen book.</span> 
</div>

Answer 2

To enable the transition effect, it is necessary to have an initial fixed height set. However, if you prefer not to have this fixed height initially, you can programmatically set it after calculating it using the following approach:

const content = document.querySelector('.contents');
const initalPos = content.offsetTop;
content.style.height = content.clientHeight + 'px';

window.addEventListener("scroll", () => {
  content.classList.toggle('stuck', content.offsetTop > initalPos);
});

body {
  height: 300vh;
}

.contents {
  margin-top: 50px;
  border: 1px solid black;
  position: sticky;
  top: 0;
  transition: height 3s;
}

.stuck {
  height: 100px !important;
  background-color: green;
}

<div class="contents">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and <span style="color:red;">scrambled it to make a type specimen book.</span> 
</div>

Answer 3

Answer №2

Unlike other styles, Height does not animate on its own. In order to create an animation for height, you must establish a starting and ending reference point. This is why I have included min-height to achieve the desired height animation.

If you specify a fixed height, there is a possibility that the content may overflow. Therefore, it is recommended to use the actual height of the element for animating height.

const content = document.querySelector('.contents');
const initalPos = content.offsetTop;

window.addEventListener("scroll", () => {
  if(content.offsetTop > initalPos) {
    content.classList.add('stuck');
  } else {
    content.classList.remove('stuck');
  }
});

body {
  height: 300vh;
}

.contents {
  margin-top: 50px;
  border: 1px solid black;
  position: sticky;
  top: 0;
  min-height: 50px; /* adjust according to your element */
  transition: min-height ease 1s;
}

.stuck {
  min-height: 100px;
  background-color: green;
}

<div class="contents">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</div>

Answer 4

Unlike other styles, Height does not animate on its own. In order to create an animation for height, you must establish a starting and ending reference point. This is why I have included min-height to achieve the desired height animation.

If you specify a fixed height, there is a possibility that the content may overflow. Therefore, it is recommended to use the actual height of the element for animating height.

const content = document.querySelector('.contents');
const initalPos = content.offsetTop;

window.addEventListener("scroll", () => {
  if(content.offsetTop > initalPos) {
    content.classList.add('stuck');
  } else {
    content.classList.remove('stuck');
  }
});

body {
  height: 300vh;
}

.contents {
  margin-top: 50px;
  border: 1px solid black;
  position: sticky;
  top: 0;
  min-height: 50px; /* adjust according to your element */
  transition: min-height ease 1s;
}

.stuck {
  min-height: 100px;
  background-color: green;
}

<div class="contents">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</div>

Transition in CSS did not work as expected when the class of the sticky element was

Answer №1

Answer №2

Similar questions

Angular checkbox filtering for tables

Passing a JavaScript variable to a PHP variable

Click on a div to switch between displaying an arrow pointing to the right and an arrow

The stacking order of a child element within a parent element, which has a transform

Troubles with Flex wrap in CSS3 on iOS 10.3.2 browsers (Chrome and Safari)

When an input field is added to an HTML form, all elements positioned below it automatically inherit its attributes

JavaScript Variables Lose Their Values

Is there a way to update the value of a variable with the help of a checkbox?

Managing memory in Three.js

Trouble with Angular 7: Form field not displaying touched status

Arranging elements by date in JavaScript

Grouping Columns in an HTML Table using Angular 4

Unable to send a function from a parent component to a child component in React using a list

Does the media query max-width refer to the size of the viewport or the size of the window?

Does Koa.js have a nested router similar to Express?

The information displayed in Postman contains a few extra characters added to the response data

The device-width value in the viewport width setting is causing issues

Issue with Google Tag Manager where the class name is ending with '-ok' is causing problems

Seeking the "onChange" functionality while implementing the "addEventListener" method

Tips for implementing an HTML modal with AngularJS binding for a pop up effect