javascript - Div 出现在页面加载时

Question

我有以下代码应用显示/隐藏 div 的类。

$(document).ready(function($) { 
      function reusuableUpAnimFunc(elementName, offset, hideClass, showClass) {
        $(window).scroll(function() {
        $animation = $(elementName);                
          ($(this).scrollTop() > offset) ? $animation.removeClass(hideClass).addClass(showClass):
            $animation.addClass(hideClass).removeClass(showClass);
        });
      } 

reusuableUpAnimFunc('#top-btn', 400, 'element-hide', 'element-show');
});

CSS

.element-hide {
 opacity: 0;
 visibility: hidden;
}

.element-show {
 opacity: 1;
 visibility: visible;
}

问题是当页面第一次加载时 div 是可见的，然后一旦用户滚动它就会消失，然后按预期重新出现。我希望它的不透明度为 0，直到达到偏移距离

Answer 1

您可以使用 triggerHandler('scroll') 在页面加载时触发滚动回调函数.我会这样写:

$(document).ready(function($) {
    function swapClass(selector, class1, class2, setClass2) {
        $(selector).toggleClass(class1, !setClass2).toggleClass(class2, setClass2);
    }

    function reusuableUpAnimFunc(selector, offset, hideClass, showClass) {
        $(window).scroll(function () {
            swapClass(selector, hideClass, showClass, $(this).scrollTop() > offset);
        }).triggerHandler('scroll');
    }

    reusuableUpAnimFunc('#top-btn', 50, 'element-hide', 'element-show');
});

.element-hide {
    opacity: 0;
    visibility: hidden;
}

.element-show {
    opacity: 1;
    visibility: visible;
}
p { height: 50px };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>scroll down...<p>
<div id="top-btn">This will appear on scrolling</div>
<p></p><p></p><p></p><p></p><p></p>

或者，您可以显式调用该函数:

    // ...
    $(window).scroll(function () {
        swapClass(selector, hideClass, showClass, $(this).scrollTop() > offset);
    });
    // Call it now:
    swapClass(selector, hideClass, showClass, $(this).scrollTop() > offset);
    // ...