滾動時調整頁眉大小

Question

我試圖在向下滾動時更改頁眉大小（我命名爲#headwrapper）及其背景顏色。正如你所看到的，當滾動大於145時，我需要它來觸發類.small。

只有當我將屏幕寬度最小化爲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); 
     } 
    } 
    }); 
});