滾動位置時顯示Div

首先我想參考一下這個網站：http://annasafroncik.it/ 我喜歡看動畫的方式。在jquery中創建類似的函數很難嗎？有沒有任何插件來創建這樣的效果？滾動位置時顯示Div

希望有人會幫助我。

2012-02-01 idbranding

基本上，你想要一個「hideme」類添加到你想要隱藏的每一個元素（然後你設置類「不透明度：0」;

然後，使用jQuery你設置一個$（窗口）。滾動（）事件，以覈對您的可視窗口的底部邊緣的每一個「hideme」元素的底部位置

下面是它的肉......

/* Every time the window is scrolled ... */ 
$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.hideme').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it in */ 
     if(bottom_of_window > bottom_of_object){ 

      $(this).animate({'opacity':'1'},500); 

     } 

    }); 

});

這裏是一個完整的jsfiddle： http://jsfiddle.net/tcloninger/e5qaD/

來源

2012-02-01 16:08:00

哇，我喜歡這個例子，非常清晰，乾淨的代碼！問題解決了 – idbranding 2012-02-01 16:24:19

你提到了一個插件，所以這裏是我剛剛扔在一起的一個：http://timothyaaron.com/js/fadein.on.scroll.js 它自動隱藏當前視圖外的* all *元素，並淡化它們在滾動中（使用「hideme」類元素，所以請確保你沒有使用它的任何其他原因）。 – 2012-02-01 16:26:39

哇，感謝您的幫助！非常感謝 – idbranding 2012-02-01 16:36:12

插件？也許吧，但是你肯定可以自己構建你可以用jQuery想象的動畫組合。如果你牢牢掌握選擇器和CSS，那麼天空就是極限！我建議從jQuery website開始，並檢查出some examples。

爲了幫助實現滾動，並且如果您已經熟悉jQuery，可能會給出一些建議，您可以嘗試以下方法...找出頁面上多遠，div，監聽滾動事件，當div成爲焦點時（即：該頁面已經滾過div的位置），請運行動畫。例如：

<div id="my_div">Some content</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     var my_div = $("#my_div"); 
     var div_top = my_div.offset().top; 

     $(document).scroll(function() { 
      if (div_top <= $(document).scrollTop()) { 
       // do some cool animations... 
      } 
     }); 

    }); 

</script>

我希望我沒有搞亂我的語法！

來源

2012-02-01 14:51:58

感謝這個解決方案！ – idbranding 2012-02-01 16:36:34

-1

試試這個。它的工作對我來說

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 400) { 
    $("body").addClass("allowshow"); 
    } else { 
    $("body").removeClass("allowshow"); 
    } 
});

和這個CSS是

.showmydiv{display:block}

來源

2015-06-26 12:10:52

滾動位置時顯示Div

回答

相關問題