jQuery讓div滑入滾動頁面

我想在用戶向下滾動頁面時將div滑動到我的頁面上（div將包含一個鏈接，將它們帶回頁面的頂部）。這是我目前使用的代碼：jQuery讓div滑入滾動頁面

jQuery(window).scroll(function() { 
if (jQuery(this).scrollTop() > 100) { 
    jQuery('.totop').animate({ right: '0px' }); 
} else { 
    jQuery('.totop').animate({ right: '-300px' }); 
} 
});

而CSS：

.totop { 
position:fixed; 
bottom:50%; 
right:-300px; 
width:300px; 
height:100px; 
font-size:30px; 
color:white; 
background:#f18500; 
}

股利的行爲非常奇怪的是，當我向下滾動的div大約需要5秒鐘出現，那麼它進入視野，但看起來好像它正在幾次嘗試再次滑落，然後仍然保持靜止，當我滑回頂部時消失......但在大約5秒後再次。希望能幫助我找出我的代碼有什麼問題。

來源

2013-02-22 Sam Skirrow

檢查這篇文章創建一個頁面頂部的滾動︰http://recentsolutions.net/web-development/smooth-scroll/ – 2013-02-22 14:37:59

你的動畫越來越排隊，使用.stop()：

jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > 100) { 
     if (jQuery('.totop').hasClass('visible') == false) { 
      jQuery('.totop').stop().animate({ 
       right: '0px' 
      }, function() { 
       jQuery('.totop').addClass('visible') 
      }); 
     } 
    } else { 
     if (jQuery('.totop').hasClass('visible') == true) { 
      jQuery('.totop').stop().animate({ 
       right: '-300px' 
      }, function() { 
       jQuery('.totop').removeClass('visible') 
      }); 
     } 
    } 
});

DEMO：http://jsfiddle.net/MkJwm/

來源

2013-02-22 14:34:59 iappwebdev

完美，謝謝 – 2013-02-22 14:39:10

沒有問題。請將此答案標爲正確。 – iappwebdev 2013-02-22 14:40:29

這不夠好，我更新了我的答案。一旦幻燈片可見並且不斷滾動，動畫就會重新開始。現在它只顯示一次。 – iappwebdev 2013-02-22 15:09:30

事情是這樣的：

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 50) { 
     $('#div-to-show').slideDown('slow'); 
    } else { 
     $('#div-to-show').slideUp('slow'); 
    } 
});

未經測試。

來源

2013-02-22 14:41:01

這不是關於上下滑動的問題！ – iappwebdev 2013-02-22 14:51:54

無論如何，這並不適用於我的bootstrap，因爲navbar只是非常快速地消失，並且不管我設置的速度如何。我認爲屏幕的一貫運動很重要。 – ytpillai 2016-01-30 04:11:32

jQuery讓div滑入滾動頁面

回答

相關問題