I have a responsive website with different height settings for a header bar. In my JavaScript, I change this value to a fixed size at one point:
$('#header').animate({marginTop: 0, height:80});
But later in my code, I want it to revert back to the original state. How can I animate it back to its default behavior by removing inline CSS properties?
I attempted this:
$('#header').animate({marginTop: 20, height:'inherit'});
However, this approach did not work.
The original CSS for the header is as follows:
#header { margin-top:20px; width:100%; height: 80px; background-color: #000; }
@media only screen and (min-width: 768px) and (max-width: 960px)
{
#header{height:100px;}
}
@media only screen and (max-width: 767px)
{
#header{height:auto; padding-bottom: 1px;}
}
Failed solution 1:
Storing the height value:
This approach is unfeasible due to users resizing their windows between storing and restoring the value.
Failed solution 2:
Animating to 'nothing', an empty string, fails because jQuery interprets it as 0 and animates the height to zero pixels.