jQuery動畫邊緣Div頁滾動

我想建立一個導航欄使用引導，並在導航的品牌區域添加jQuery效果。jQuery動畫邊緣Div頁滾動

我試圖實現的是：當用戶滾動時，文本「公司名稱」向上滑動並被品牌圖像取代。當頁面滾動回頂端時，效果會反轉。這是迄今爲止我嘗試：

$(window).scroll(function() { 
if ($(document).scrollTop() > 50) { 
    $('.navbar').css({'background': 'rgba(0,0,0,0.8)'}); 
    $('.brand-content').animate({'marginTop' : "-=100px", function(){ 
     $('.navbar-brand').css({'font-size':'14px'}); 
     $('.brand-content').html('<img src="http://s12.postimg.org/hyoq90vkp/cpcm_logo.png"/>').animate({'marginTop' : "+=100px"}); 

}}); 


} else { 
    $('.navbar').css({'background': 'rgba(0,0,0,0.15)'}); 
    $('.brand-content').animate({'marginTop' : "-=100px", function(){ 
      $('.navbar-brand').css({'font-size':'14px'}); 
      $('.brand-content').html('Company Name').animate({'marginTop' : "+=100px"}); 

}}); 

} 
});

目前，文本向上滑動，但圖像不會滑下。我還注意到，當我使用fadeIn和fadeOut工作時，每當用戶滾動而不是僅在從頂部滾動並返回頂部時才運行該函數。

我很樂意嘗試任何解決方案，只要效果很流暢。

編輯：https://jsfiddle.net/w8mm5mfc/1/忘了添加小提琴！

來源

2015-05-07 Dale

給我一秒，我正在清理jsfiddle，uno momento上的一些東西。 – tribe84

你有幾個選擇，但我相信你個人使用JavaScript做的太多了（純CSS可以達到很多期望的效果）。

我已經更新了你的例子：https://jsfiddle.net/74pwvw7a/2/

我已經簡化您的JavaScript只跟蹤你的頁面的體是否被滾動與否：

$(window).scroll(function() { 
    if ($(document).scrollTop() > 50) { 
     $("body").addClass('scrolling'); 
    } else { 
     $("body").removeClass('scrolling'); 
    } 
});

對於HTML，我添加了圖像，始終是標記的一部分（但只顯示正確的位）。

<div class="navbar-header"> <a class="navbar-brand" href="#"> 
    <div class="brand-content">Company Name</div> 
    <div class="brand-image"> 
     <img src="http://s12.postimg.org/hyoq90vkp/cpcm_logo.png"/> 
    </div> 
</a>

而且CSS的變化：

.brand-content, .brand-image{ 
    display: block; 
    background: green; 
    height: 50px; 
    line-height: 50px; 
    transition : all 0.4s ease-in; 
    -moz-transition: all 0.4s ease-in; 
    -webkit-transition: all 0.4s ease-in; 
} 

.brand-image img{ 
    height: 100%; 
} 

.navbar-brand{ 
    position: relative; 
    padding: 0px; 
    overflow: hidden; 
} 

.scrolling .brand-image { 
    display: block;  
} 

.scrolling .brand-content { 
    margin-top: -50px; 
}

這是怎麼回事？ - 你基本上只是調整文本塊的邊距。一旦頁面開始滾動，你會給它一個負的上邊距，因爲容器溢出：隱藏，一旦它滾動出容器的視口，它將被隱藏。由於圖像位於該元素的下方（並且被切除視圖），它將反過來滾動到視圖中。所有動畫都由css處理。您可以使用-transition屬性來調整緩動和時間。

來源

2015-05-07 17:39:40 tribe84

你的jQuery運行時，由於您的函數射擊每次用戶滾動每一次，你的第一個行定義爲：

$(window).scroll(function() {

如果你想阻止這種情況發生，你需要添加一個變量來跟蹤，一旦它發生的第一次，然後從如果這個變量被設置

對於你的第二個問題再次停止運行的功能，你有一個語法錯誤在你的腳本：

$('.brand-content').animate({'marginTop' : "-=100px"}, function(){ 
    $('.navbar-brand').css({'font-size':'14px'}); ^
    $('.brand-content').html('<img src="http://s12.postimg.org/hyoq90vkp/cpcm_logo.png"/>').animate({'marginTop' : "+=100px"}); 
});

注意第一行（我添加了箭頭）和最後一行 - 我已將大括號關閉（「}」）移至marginTop語句後面，並將其從最後一行中刪除。它很微妙，但很重要！

來源

2015-05-07 17:25:22 Anuj

jQuery動畫邊緣Div頁滾動

回答

相關問題