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')在页面加载时触发滚动回调函数。我会写如下：

＆＃13;

$(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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者，您可以明确地调用该函数：

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

Div出现在页面加载上

1 个答案: