根据滚动位置显示/隐藏菜单

Question

我在网站的页脚添加了一个粘性菜单（.component）。如果我从页面顶部向下滚动200像素，它就会出现，如果小于200像素，就会消失。

这基本上就是我们的想法。然而，当它在向上滚动时消失时，如果我向下滚动，它就再也不会显示了。

$(window).scroll(function() {
  if ($(this).scrollTop() > 200) {
    //add effect / animation 
    $('.component').delay(100).animate({
      opacity: 1
    }, 1000);
  } else {
    if ($(this).scrollTop() == 0) {
      $('.component').hide();
    }
  }
});

body{ height:1000px; }
.component { position:fixed; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="component">
  <!-- Start Nav Structure -->
  <button class="cn-button" id="cn-button">+</button>
  <div class="cn-wrapper" id="cn-wrapper">
    <ul>
      <li><a href="#"><span class="fa fa-briefcase"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-headphones"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-home"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-facetime-video"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-envelope"></span></a>
      </li>
    </ul>
  </div>
</div>

谢谢！

Answer 1

一旦隐藏，如果将不透明度设置为1，它将不会再次出现。您需要调用show（）

Answer 2

hide()更改display属性而不是opacity，在这两种情况下都必须使用animate()。

$(window).scroll(function() {
  if ($(this).scrollTop() > 200) {
    //add effect / animation 
    $('.component').stop(true).animate({
      opacity: 1
    }, 1000);
  } else {
    if ($(this).scrollTop() == 0) {
      $('.component').stop(true).animate({
        opacity: 0
      }, 1000);
    }
  }
});

.component {
  position: fixed;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="component">
  <!-- Start Nav Structure -->
  <button class="cn-button" id="cn-button">+</button>
  <div class="cn-wrapper" id="cn-wrapper">
    <ul>
      <li><a href="#"><span class="fa fa-briefcase"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-headphones"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-home"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-facetime-video"></span></a>
      </li>
      <li><a href="#"><span class="fa fa-envelope"></span></a>
      </li>
    </ul>
  </div>
</div>
<div style="height: 800px;"></div>

Answer 3

scrollTop（）方法设置或返回所选元素的垂直滚动条位置。

根据您的代码，如果垂直滚动条的位置小于200，则它会隐藏类为"component"的元素。

一旦根据示例隐藏，就不会有任何可见的内容，如果没有内容，那么$（window）.woll（function（）｛｝）；将不会执行。这就是为什么当元素被隐藏后，当你向上滚动时，元素不会显示的原因

$(window).scroll(function (event) {
        var scroll = $(window).scrollTop();
        console.log(scroll);
        if (scroll > 200) {
            $('.component').delay(100).animate({ opacity: 1 }, 1000).show();
        }
        else {
            $('.component').hide();
        }
    });

下面是你可以查看的小提琴链接：https://jsfiddle.net/ugg15sdL/19/