CODEWITHSUNDEEP
javascriptjqueryhtmlwordpressscrolltop
harleyquinn
harleyquinn

Reputation: 3

Can't Get Header to Resize When Scrolling Down Using JQuery

Have been trying to reduce the size of my header on scroll using the info from here:

jQuery - Sticky header that shrinks when scrolling down.

However, while the header stays fixed, it's not shrinking when I scroll down.

This is what I have in my js file:

$(function(){
  $('#header').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header').data('size') == 'big')
    {
        $('#header').data('size','small');
        $('#header').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header').data('size') == 'small')
      {
        $('#header').data('size','big');
        $('#header').stop().animate({
            height:'120px'
        },600);
      }  
  }
});

Can someone help me figure out why it's not working?

I'm using the latest Wordpress and have enqueued the script in my theme's functions file - don't know if this info helps, but just wanted to give as much info as possible to get my issue resolved.

Upvotes: 0

Views: 1902

Answers (2)

charlesmwray
charlesmwray

Reputation: 36

The console is throwing an error: 

Uncaught TypeError: Property '$' of object [object Object] is not a function

I'd try enclosing your code in -> jQuery(document).ready(function ($) { }

*the important part is the $ inside the ().

jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

Upvotes: 0

Steven
Steven

Reputation: 6148

Took a quick look at your site and attempted to create a simple function to perform the desired change...

$(window).scroll(function(){
    if($(window).scrollTop > 0){
        $('header').css({
            height:"40px"
        })
    }
    else{
        $('header').css({
            height:"120px"
        })
    }
})

I did this using scratchpad on FF and received an error that, to my mind, implied that jquery wasn't loading in the first place!

Try adding the following line to you html head section.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Upvotes: 1

Related Questions