Animated change logo size on scroll

by steveorg   Last Updated December 01, 2017 18:10 PM

I'd like to have the logo shrink when the page scrolls down and expand to original when the page scrolls to the top. My code prevents the page from loading at all.

The Joomla version is 3.8.2. The template is based on Helix 3 and I'm using the Helix 3 Custom Code form to insert the javascript.

I tried adapting a script on this page: Jquery image height change on scroll Here's my version:

var imageHeight = 113,
stopHeight= 90,
PaddingHeight = 148,
stopPadding= 3;

$(window).scroll(function(e) {
var windowScroll = $(window).scrollTop(),
newPadding = PaddingHeight - windowScroll,
newHeight = imageHeight - windowScroll;
if(newHeight>=stopHeight){
$('.sp-default-logo').css("height", newHeight);
$('.logo').css("padding-top", newPadding);
}
else{
$('.sp-default-logo').css("height", stopHeight);//if it scroll more set to stopHeight
set $('.logo').css("padding-top", stopPadding);
}
};

This is the HTML:

<div class="logo">
<a href="/"><img class="sp-default-logo" src="/images/logos/logo.jpg"></a>
</div>

Thanks for any help.



Related Questions


Can't insert intro/full article image

Updated July 25, 2016 08:04 AM


Images Not Showing Up in Category View

Updated October 04, 2016 09:04 AM