By
Aires
Hi,
The rewards of pounding javascript and jquery into my brain. The css and script is at the end for you copy and paste. Remember to change the section id in the css and the script.
This site helped me out alot http://overapi.com/ as well as Treehouse with a touch of Lynda.
Here is the screencast http://screencast.com/t/l2tscyN7
http://i.imgur.com/O3Wwckm.png
#naviu4c633 {
padding: 20px 0;
-webkit-transition: padding .55s;
-moz-transition: padding .55s;
-ms-transition: padding .55s;
-o-transition: padding .55s;
transition: padding .55s;
}
<script>
jQuery(document).ready(function() {
jQuery(window).scroll(function() {
if ( jQuery(window).width() > 768) {
if (jQuery(window).scrollTop() >= 100) {
jQuery('#naviu4c633').css('padding', '0');
jQuery("#naviu4c633 img").attr("src", "your url here for mini");
} else {
jQuery('#naviu4c633').css('padding', '20px 0');
jQuery("#naviu4c633 img").attr("src", "large logo url");
}
}
});
});
</script>
~Aires