Transition for moving objects with position: fixed? - css

Question

This seems like it should be a simple problem, but I'm by no means a CSS expert, and I've been beating my head against the wall trying to figure it out. So I've got a ContentHeader element, and when the user scrolls down past a certain point, I want it to slide up to cover the NavigationHeader element. I'm changing the position of ContentHeader by changing the className property from "content-header" to "content-header top", which works, but ContentHeader just jumps into the new position instead of transitioning smoothly. This is the CSS I'm using currently:
.content-header {
position: fixed;
top: 50;
width: inherit;
z-index: 1030;
padding: 12px 15px 12px 15px;
transition: top 1s linear;
}
.content-header.top {
top: 0;
}
If you need to see the JavaScript, let me know and I can add that as well, but it's basically just doing ...
<section className={className} ...
... where the value of className would vary depending on where ContentHeader should be positioned. I thought maybe the problem was that this is happening inside a React render block and that was skipping the transition, but I tried changing the class with an onClick event that wouldn't force a re-render, and the results were the same. If anyone could help, I'd appreciate it!

Answer 1

You're missing px on your top value, which should read top: 50px;
$('button').on('click', function() {
$('h1').toggleClass('top');
})
.content-header {
position: fixed;
top: 50px;
width: inherit;
z-index: 1030;
padding: 12px 15px 12px 15px;
transition: top 1s linear;
}
.content-header.top {
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="content-header">header</h1>
<button>click</button>
That said, I would use transform: translateY(); instead of top because that's more performant. Using a transition or animation with transform get GPU acceleration, where transitioning top does not.
$('button').on('click', function() {
$('h1').toggleClass('top');
})
.content-header {
position: fixed;
transform: translateY(50px);
width: inherit;
z-index: 1030;
padding: 12px 15px 12px 15px;
transition: transform 1s linear;
}
.content-header.top {
transform: translateY(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="content-header">header</h1>
<button>click</button>

Answer 2

Try giving the initial top value a unit, for example: top: 50px.
.content-header {
position: fixed;
top: 50px; // add `px` unit here
width: inherit;
z-index: 1030;
padding: 12px 15px 12px 15px;
transition: top 1s linear;
}