滾動後降低標題高度

我在網頁上製作了一個相當大的標題，大約180px。爲了獲得更好的用戶體驗，我希望在用戶開始滾動時將頭部大小減小到大約100px，但一切都很順利，但是，我似乎無法獲得徽標以減小徽標的大小頭到井，或者至少是背景大小，有什麼想法？滾動後降低標題高度

http://jsfiddle.net/KQGyu/4/

代碼如下 -

<script> 
$(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:'100px' 
     },600); 
    } 
} 
else 
{ 
    if($('#header').data('size') == 'small') 
    { 
     $('#header').data('size','big'); 
     $('#header').stop().animate({ 
      height:'180px' 
     },600); 
    } 
} 
});$(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:'100px' 
     },600); 
    } 
} 
else 
{ 
    if($('#header').data('size') == 'small') 
    { 
     $('#header').data('size','big'); 
     $('#header').stop().animate({ 
      height:'180px' 
     },600); 
    } 
} 
}); 
</script> 










<script> 
$(function(){ 
$('#logo').data('size','big'); 
}); 

$(window).scroll(function(){ 
if($(document).scrollTop() > 0) 
{ 
    if($('#logo').data('size') == 'big') 
    { 
     $('#logo').data('size','small'); 
     $('#logo').stop().animate({ 
      width:'59px',height:'63px' 
     },600); 
    } 
} 
else 
{ 
    if($('#logo').data('size') == 'small') 
    { 
     $('#logo').data('size','big'); 
     $('#logo').stop().animate({ 
      width:'128px',height:'120px' 
     },600); 
    } 
} 
});$(function(){ 
$('#logo').data('size','big'); 
}); 

$(window).scroll(function(){ 
if($(document).scrollTop() > 0) 
{ 
    if($('#logo').data('size') == 'big') 
    { 
     $('#logo').data('size','small'); 
     $('#logo').stop().animate({ 
      width:'59px',height:'63px' 
     },600); 
    } 
} 
else 
{ 
    if($('#logo').data('size') == 'small') 
    { 
     $('#logo').data('size','big'); 
     $('#logo').stop().animate({ 
      width:'128px',height:'120px' 
     },600); 
    } 
} 
}); 
</script>

來源

2014-02-26 user3357728

你是什麼意思「我似乎無法獲得徽標來縮小尺寸」？會發生什麼，標題是否減少？你能提供一個小提琴嗎？ – LcSalazar

PLease提供小提琴並粘貼您的HTML代碼。 –

我的標題縮小了大小，雖然由於某種原因它不適用於我的jsfiddle，但問題是我的標誌縮小了尺寸，但背景尺寸似乎沒有改變，留下了一個裁剪的標誌。我會在我的原始問題中添加一個小提琴。 @LcSalazar – user3357728

讓CSS完成所有的工作。在javascript中對動畫進行編碼會導致各種各樣的痛苦。

你的JS應該是如此簡單：

$(window).scroll(function(){ 
    if($(document).scrollTop() > 0) { 
     $('#header').addClass('small'); 
    } else { 
     $('#header').removeClass('small'); 
    } 
});

而且你的CSS設置了兩種狀態，而且它們之間如何轉換：

#header { 
    position: fixed; 
    top: 0; 
    background: #888; 
    color: white; 
    font-size: 30px; 
    height: 60px; 
    width: 100%; 

    transition: font-size 0.5s, height 0.5s; 
    -webkit-transition: font-size 0.5s, height 0.5s; 
    -moz-transition: font-size 0.5s, height 0.5s; 

} 

#header.small { 
    font-size: 15px; 
    height: 30px; 
}

看到它在這裏工作：http://jsfiddle.net/VLD8G/

現在，您可以根據#header.small規則規劃任何不同的東西。例如：

#header .logo { 
    width: 100px; 
    height: 100px; 
} 

#header.small logo { 
    width: 50px; 
    height: 50px; 
}

或其他你想改變的東西。而美麗的是，你的JS根本不需要改變。

來源

2014-02-26 21:03:22

謝謝@Alex Wayne似乎有道理。我會讓你知道我怎麼樣！真的很感謝幫助。 – user3357728

賓果！像魅力@亞歷山大·韋恩的作品非常感謝，非常感謝。 – user3357728

滾動後降低標題高度

回答

相關問題