使用 JQuery 向下滚动时无法调整标题大小

Question

一直在尝试使用此处的信息来减小滚动标题的大小：

jQuery - Sticky header that shrinks when scrolling down。

但是，虽然标题保持固定，但当我向下滚动时它并没有缩小。

这是我的 js 文件中的内容：

$(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);
      }  
  }
});

有人可以帮我弄清楚为什么它不起作用吗？

我正在使用最新的 Wordpress，并将脚本放入主题的函数文件中 - 不知道这些信息是否有帮助，但只是想提供尽可能多的信息来解决我的问题。

Answer 1

快速浏览您的网站并尝试创建一个简单的函数来执行所需的更改...

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

我在 FF 上使用暂存器执行此操作，并收到一个错误，在我看来，这暗示 jquery 最初没有加载！

尝试在html head 部分添加以下行。

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

Answer 2

控制台报错：

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

我会尝试将您的代码包含在 -> jQuery(document).ready(function ($) { }

*重要的部分是()里面的$。

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