Question

尝试为2个单独的div运行相同的功能。它应该应用课程＆＃39; header-hide＆＃39; /＆＃39; header-show＆＃39;当用户滚动一定距离（偏移）时。

一个div /元素（无变量）的工作代码是

jQuery(document).ready(function($){


// adjust this number to select when your button appears on scroll-down
var offset = 75,

// bind with the button link
$animation = $('header');

// apply animation
$(window).scroll(function(){
    ( $(this).scrollTop() > offset ) ? $animation.addClass('header-hide').removeClass("header-show"):
    $animation.addClass('header-show').removeClass("header-hide");
});

});

但是当我尝试使用变量将它应用于2个div时，不起作用

＆＃13;

$(document).ready(function($) {

      function reusuableAnimationFunc(elementName, offset, hideClass, showClass) {
        $animation = $(elementName);

        $(window).scroll(function() {
          ($(this).scrollTop() > offset) ? $animation.addClass(hideClass).removeClass(showClass):
            $animation.addClass(showClass).removeClass(hideClass);
        });
      });

    reusuableAnimationFunc('header', 70, 'header-hide', 'header-show') 
    reusuableAnimationFunc('#top-btn', 300, 'element-hide', 'element-show')

＆＃13;

.element-hide,
.header-hide {
  opacity: 0;
  visibility: hidden;
}

.element-show,
.header-show {
  opacity: 1;
  visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<header class="jumbotron header-show">

  <div id="jumbo-wrap">
    <h3>Title</h3>
    <h1>Sub-title</h1>
  </div>

</header>

<div id="top-btn" class="element-show">
  <a href="#"> ... </a>
</div>

＆＃13;

Answer 1

javascript函数中存在语法错误。您正在使用});关闭reusuableAnimationFunc函数，它应该是}。此外，您需要在最后关闭document.ready()功能。该功能永远不会关闭。

$(document).ready(function($) {    
          function reusuableAnimationFunc(elementName, offset, hideClass, showClass) {
            $(window).scroll(function() {
            $animation = $(elementName);                
              ($(this).scrollTop() > offset) ? $animation.removeClass(showClass).addClass(hideClass):
                $animation.addClass(showClass).removeClass(hideClass);
            });
          }    
        reusuableAnimationFunc('header', 70, 'header-hide', 'header-show');
        reusuableAnimationFunc('#top-btn', 300, 'element-hide', 'element-show');
        });

在Windows.scroll函数

中移动$animation = $(elementName);

使用2个div的变量运行一个代码

1 个答案: