How to Set Object Transition Height to Scroll Down

Fixing an object at the top of a webpage even when scrolling down can be achieved with CSS3. Whether it is text, an image, video or some other object, there may be instances where you want the object to remain at a specific position despite the user navigating the page. There are several reasons why this may be appropriate and there is no need to use an intrusive popup box to achieve the effect.

An object’s height defines its position on the page but does not cater for scrolling up or down. This is where max-height comes into play for transitioning. Let’s look at the code below for a list that is to transition with scrolling. This may not necessarily be the solution but it is a convenient workaround that can still yield the desired effect.

CSS3 Code

Now the content can be placed within a DIV container.

The timing can be changed as required for a smoother transition. Remember that this effect can also be achieved with JavaScript depending on individual preferences.

Alternative Code

Another way of approaching this problem is to use ScaleY. It will work well on CSS3-capable browsers but may not work on Internet Explorer versions before IE9.

The CSS3 Code is as follows:

A DIV container will not be needed in this case. Here is the HTML code:

However, this approach is not ideal. The transformed object behaves like a relatively positioned object. Nevertheless it is worth considering as an alternative.

Leave a Comment