當div從頁面頂部到達一定距離時開始動畫

滾動時，我有一個在窗口內浮動的菜單。目前我的菜單始終保持從窗口頂部190px。我使用的尺寸插件，這裏是我的jQuery：當div從頁面頂部到達一定距離時開始動畫

$(document).ready(function() {  
menuYloc = parseInt($('#mainMenu').css('top').substring(0,$('#mainMenu').css('top').indexOf('px'))) 
    $(window).scroll(function() { 
     var offset = menuYloc+$(document).scrollTop()+'px'; 
     $('#mainMenu').animate({top:offset},{duration:600,queue:false}); 
    }); 
});

我想做到的是，當你滾動到頁面頂部的菜單是190px從頂部離開。但是，當您開始向下滾動菜單時，滾動頁面直到距窗口頂部50px，然後它開始浮動，始終保持距窗口頂部50px，除非您向後滾動到頂部頁。

希望有道理，請讓我知道你是否有解決方案。

來源

2011-12-08 Bryan

嗨，感謝您的建議，唯一的是我想保留動畫。我創建了一個jsfiddle，將我的原始函數與兩個建議進行比較。檢查出來，讓我知道它是否可能：http://jsfiddle.net/b793h/ – Bryan

好的，謝謝@twsansbury和@andy。看起來我已經在正確的方向上推動了這一點。

這裏是我結束了：

var minDistance = 50; 
var startDistance = 190; 
$(window).scroll(function() { 
    var scrollTop = $(document).scrollTop(); 
    var newDistance = (scrollTop + minDistance); 
    if (scrollTop > startDistance - minDistance) { 
     $('#mainMenu').animate({top:newDistance},{duration:600,queue:false}); 
    } else { 
     $('#mainMenu').animate({top:startDistance},{duration:600,queue:false}); 
    } 
});

這裏是一個的jsfiddle，顯示了三種解決方案之間的比較：爲幫助:)

來源

2011-12-08 19:23:00 Bryan

var minDistance = 50; 
var startDistance = 190; 
$(window).scroll(function() { 
    var scrollTop = $(document).scrollTop(); 
    if (scrollTop > startDistance - minDistance) { 
     $('#mainMenu').css('top', scrollTop + minDistance); 
    } else { 
     $('#mainMenu').css('top', startDistance); 
    } 
});

小提琴：
http://jsfiddle.net/d52wr/

來源

2011-12-08 03:04:34 Andy

一種方法是改變都基於滾動距離position和top屬性。這種方法允許瀏覽器在滾動發生時的渲染循環期間處理顯示，與僅使用top的方法相比，可以更平滑地進行轉換，因爲事件處理會產生閃爍的僞像。

var minDistance = 50; 
var startDistance = 190; 
$(window).scroll(function() { 
    var scrollTop = $(document).scrollTop(); 
    if (scrollTop > startDistance - minDistance) { 
    $('#mainMenu2').css({position: 'fixed', 
         top: minDistance}); 
    } else { 
     $('#mainMenu2').css({position: 'absolute', 
          top: startDistance}); 
    } 
});

這裏是示出兩種方法之間的側方比較一個的jsfiddle：http://jsfiddle.net/nKAtB/。在某些瀏覽器中，當快速滾動或遠距離滾動時，可以在每個滾動事件之後定位div的情況下觀察到閃爍效果。

來源

2011-12-08 06:52:42

$(window).scroll(function() { 
    $('#animatedElement').each(function(){ 
    var imagePos = $(this).offset().top; 

    var topOfWindow = $(window).scrollTop(); 
     if (imagePos < topOfWindow+400) { 
      $(this).addClass("slideUp"); 
     } 
    }); 
});

再次 http://jsfiddle.net/cpL69/

謝謝

用要生成動畫的元素的ID或類替換#animatedElement。用動畫類替換slideUp。 400表示元素和屏幕頂部之間的空間。當元素距離屏幕頂部400px時，動畫將激活。增加此數字可以使動畫遊戲更快啓動。

來源

2015-09-10 09:01:22

當div從頁面頂部到達一定距離時開始動畫

回答

相關問題