Your CSS transition effect is specifically set up for the header links only when their parent element has a "sticky" class attached to it. This means that once the "sticky" class is removed, the transition effect does not take place.
To resolve this issue, ensure that the transition effect is also applied to the <a> elements that do not have the "sticky" class, similar to how you have implemented it for your <h1>.
Replace your current CSS setup with this revised version:
nav ul li a {
...
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.sticky nav ul li a { ... }
An illustration of the problem and solution can be seen below:
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("sticky");
} else {
$('header').removeClass("sticky");
}
});
body {
line-height: 1;
font-family: 'PT Sans', sans-serif;
margin: 0;
}
ol,
ul {
list-style: none;
}
img {
max-width: 100%;
}
/* NAV */
header {
position: fixed;
width: 100%;
background: #335C7D;
}
header h1 {
font-size: 40px;
color: #fff;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.sticky h1 {
font-size: 25px;
}
.logo {
float: left;
display: block;
padding: 20px;
}
nav ul {
float: right;
position: relative;
top: 30px;
right: 20px;
}
nav ul li {
float: left;
}
nav ul li a {
padding: 10px;
font-size: 30px;
text-decoration: none;
color: #fff;
display: block;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.sticky nav ul li a {
font-size: 20px;
position: relative;
top: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<span class="logo">
<h1>Sticky Header</h1>
</span>
<nav>
<ul>
<li><a href="#">Page 1</a>
</li>
<li><a href="#">Page 2</a>
</li>
<li><a href="#">Page 3</a>
</li>
</ul>
</nav>
</header>
<!-- an image for demonstration purposes -->
<img src="http://netdna.webdesignerdepot.com/uploads7/how-to-create-an-animated-sticky-header-with-css3-and-jquery/large-image.jpg" alt="Big Image" />