0

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.

Community
  • 1
  • 1
harleyquinn
  • 3
  • 3

2 Answers2

1

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>
Steven
  • 6,053
  • 2
  • 16
  • 28
  • Since I am using Wordpress, I thought it automatically loaded jquery - in my html head section it shows that it's there in the wp-includes folder. However just to see, I did what you suggested and the header did shrink. Kind of confused now as to how to load jquery because I thought WP did it automatically. Any suggestions? – harleyquinn Jul 12 '13 at 17:27
  • 1
    Looking at the jquery file that your site loads it also includes the `.noConflict()` line... Now, don't quote me on this: from what I _understand_ this means that you would have to use `jQuery` in place of `$` in your code (i.e just change every `$` with the word `jQuery`). You could also remove that line from the jquery file that you load and it should then work as is (i.e. with the `$`)! I'm quite interested to know if this does solve the problem, but no guarantees from me!! – Steven Jul 12 '13 at 17:39
  • Replacing the `$` with `jQuery` worked. But I wonder if this is the best solution? – harleyquinn Jul 12 '13 at 20:39
  • The `$` is just a library usually the `jQuery` library. So, normally, both (`$` and `jQuery`) mean exactly the same thing and you can use them interchangeably without any problems. The problem is that `$` can be used by other libraries as well as jQuery **but** only one library can use it at a time; the `.noConflict()` command/function _unbinds_ `$` from the `jQuery` library and so in your case `$` means nothing! You could delete the `.noConflict()` line and then you would be able to use `$` but in all honesty, there's no real need to... – Steven Jul 12 '13 at 21:00
0

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

Community
  • 1
  • 1
charlesmwray
  • 36
  • 3
  • Tried your suggestion, but it still didn't work. Thanks for taking the time to help out though. – harleyquinn Jul 12 '13 at 17:42
  • 1
    I just took a look at your code. The console error was getting called on line 1. Now it is getting called on line 5. This suggests to me that if you put the whole chunk of code inside `jQuery(document).ready(function ($) {}` it will work. The problem is that wordpress conflicts with jQuery. So you have to reassign the $ to jQuery. Thats what `jQuery(document).ready(function ($) {}` does – charlesmwray Jul 12 '13 at 18:00
  • Thanks again for your help. Between your response and Steven's response I ended replacing the `$` with `jQuery` and it works and now I am not getting anymore errors. – harleyquinn Jul 12 '13 at 20:42