如何仅在向下滚动时使 div 淡入？答案

【问题标题】：How can I make a div fadeIn only on scrolling down?如何仅在向下滚动时使 div 淡入？
【发布时间】：2013-12-26 03:14:36
【问题描述】：

我创建了一个滚动到顶部的功能，让访问者在单击按钮时滚动到顶部。这很好用。我还让按钮出现在滚动条上。

我需要的是在向下滚动时出现并在滚动到顶部时消失。但目前，它首先出现在页面加载上，然后是淡出，然后是淡入。我怎样才能让它只在页面向下滚动时出现？

这里是html：

<div>
   <p> The page's content</p>
   <div class="scrolltop">    
       <a href="#top" id="scrolltop">Top</a>
   </div>
</div>

这里是 jquery：

<script>
  jQuery("a[href='#top']").click(function() {
     jQuery("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});
</script>
    <script>
jQuery(window).scroll(function() {

    if (jQuery(this).scrollTop()> 200)
     {
        jQuery('.scrolltop').fadeIn();
     }
    else
     {
      jQuery('.scrolltop').fadeOut();
     }
 });
    </script>

这是css：

#scrolltop {
    background-color: orange !important;
    color:#FFF;
    color:rgba(255, 255, 255, 0.7);
    font-size:12px;
    border-radius: 2px;
    border: 0;
    outline: 0;
    right: 0;
    bottom: 50px;
    height: 50px;
    position: fixed;
    z-index:9999;
}

#scrolltop:hover {
    opacity: 1.0;
}

为了方便，这里是我的-fiddle

【问题讨论】：

所有内容，还有小提琴？ +1

标签： jquery scroll scrolltop

【解决方案1】：

jsFiddle Demo

非常简单的修复，只需在加载时隐藏您的滚动条。

jQuery('.scrolltop').hide();

另一种方法是执行hide 在内部执行的操作，只需将此类设置为按定义隐藏 (jsFiddle Demo)

.scrolltop{
 display: none;
}

【讨论】：

嗨！感谢您的快速修复。根据性能哪个更好？用 jQuery jQuery('.scrolltop').hide(); 隐藏？或 css display:none; ?
@IamSJ - 首选 css 方法，因为它不必等待 document.ready 触发，它只会像那样渲染。在内部，所有hide 所做的只是将样式更改为display:none，并将一些数据添加到showing 的jQuery 对象中。

【解决方案2】：

将此添加到您的 CSS

.scrolltop {
    display:none;
}

所以它最初是隐藏的，不需要等待你的代码，比用 js 做的要好得多

【讨论】：

【解决方案3】：

尝试添加这一行：

jQuery(document).ready(function() { jQuery('.scrolltop').hide() } );

Fiddle

【讨论】：