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

我会尝试将您的代码封闭在 - ＆gt; jQuery（document）.ready（function（$）{}

*重要的部分是（）内的$。

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

使用JQuery向下滚动时无法获取调整大小

2 个答案: