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秒后再次。希望能帮助我找出我的代码有什么问题。

检查这篇文章创建一个页面顶部的滚动︰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: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'); 
    } 
});

未经测试。

这不是关于上下滑动的问题！ – iappwebdev 2013-02-22 14:51:54

无论如何，这并不适用于我的bootstrap，因为navbar只是非常快速地消失，并且不管我设置的速度如何。我认为屏幕的一贯运动很重要。 – ytpillai 2016-01-30 04:11:32

jQuery让div滑入滚动页面

相关推荐