jQuery在向下滚动页面时使div滑入

Posted 2023-05-08

【中文标题】jQuery在向下滚动页面时使div滑入

【英文标题】：jQuery make div slide in when scrolling down page

【发布时间】：2013-02-08 04:56:24

【问题描述】：

当用户向下滚动页面时，我想让一个 div 从右侧滑到我的页面上（该 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 的行为非常奇怪，当我向下滚动 div 大约需要 5 秒钟才能出现，然后它出现在视图中，但看起来它正在尝试再次滑落，然后保持静止，当我滑回顶部它消失了……但大约 5 秒后又消失了。希望得到一些帮助以找出我的代码有什么问题。

【问题讨论】：

查看这篇文章以创建滚动到页面顶部：recentsolutions.net/web-development/smooth-scroll

【参考方案1】：

您的动画正在排队，请使用.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')
            );
        
    
);

演示：http://jsfiddle.net/MkJwm/

【讨论】：

这还不够好，我更新了我的答案。一旦幻灯片可见并且您继续向下滚动，动画就会再次开始。现在它只显示一次。

我非常喜欢这个。但是，如果他们不想看到 div，有没有办法让访问者点击它来关闭它？

@Jornes 看看这个小提琴：jsfiddle.net/10dL7jb6。有一个切换按钮，您可以使用它隐藏和显示 div。隐藏时，div 的一小部分仍然可见，以便进行切换。如果距离顶部不到 100 像素，则 div 永远不可见。

【参考方案2】：

类似这样的：

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

未测试。

【讨论】：

不是上下滑动的问题！

这对我来说无论如何都不适用于引导程序，因为导航栏很快就会消失并且无论我设置什么速度都会出现。我认为屏幕的一致移动很重要。