Question

我正在尝试在向下滚动时更改标题大小（我将其命名为#headwrapper）及其背景颜色。正如您所看到的，当滚动为＆gt;时，我需要它来触发类.small。 145。

仅当我将屏幕宽度降至600px或更低时，它才有效。我有这个问题，因为我必须将最后一行从height: '130px'更改为height: 'auto'; max-height: '1000px'。这是为了完全看到屏幕宽度为600px时触发的下拉菜单。它的高度为130px。

这是剧本：

$(window).scroll(function () {
    var sc = $(window).scrollTop()
    if (sc > 145) {
        $("#pageheader, #headwrapper, #main-nav, .logos, #social, #main-  logo").addClass("small");
    } 
    else {
        $("#pageheader, #headwrapper, #main-nav, .logos, #social, #main-  logo").removeClass("small")
    }
});

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

$(window).scroll(function(){
    if ($(document).scrollTop() > 200) {
        if ($('#headwrapper').data('size') == 'big') {
            $('#headwrapper').data('size', 'small');
            $('#headwrapper').stop().animate({
                height:'75px'
            }, 400);
        }
    } else {
        if ($('#headwrapper').data('size') == 'small') {
            $('#headwrapper').data('size', 'big');
            $('#headwrapper').stop().animate({
                height: 'auto'; 
                max-height: '1000px'
            }, 400);
        }  
    }
});

Answer 1

动画对象语法中有错误。将;替换为,并引用它们：

$('#headwrapper').stop().animate({
  "height": 'auto',       // Change ; to , as this is an object.
  "max-height": '1000px'
}, 400);

并移动document ready函数中的所有内容：

$(function() {
  $('#headwrapper').data('size','big');
  $(window).scroll(function () {
    var sc = $(window).scrollTop();
    if (sc > 145) {
      $("#pageheader,#headwrapper,#main-nav,.logos,#social,#main-  logo").addClass("small");
    } 
    else {
      $("#pageheader,#headwrapper,#main-nav,.logos,#social,#main-  logo").removeClass("small");
    }
  });
  $(window).scroll(function() {
    if($(document).scrollTop() > 200) {
      if($('#headwrapper').data('size') == 'big') {
        $('#headwrapper').data('size','small');
        $('#headwrapper').stop().animate({
          height:'75px'
        },400);
      }
    }
    else
    {
      if($('#headwrapper').data('size') == 'small') {
        $('#headwrapper').data('size','big');
        $('#headwrapper').stop().animate({
          "height": 'auto',
          "max-height": '1000px'
        },400);
      }  
    }
  });
});

在滚动时调整标题大小

1 个答案: