Question

当页面向下滚动100px时，我有一个固定位置的标题div，我希望淡入淡出（通过jQuery）。

我正在使用的jquery是：

$(document).ready(function(){
  $("body").scroll(function(){
    if ($("body").scrollTop() > 100) {
            $(".header").fadeIn();
                }
            else {
                $(".header").fadeOut();
            }
        });
    });

完整代码在此处：https://jsfiddle.net/Lxj0ynuk/

我不知道为什么这不起作用。我对jQuery并不是特别自信，所以我对出了什么问题感到茫然。

有人可以帮忙吗？

Answer 1

首先，你还没有将jQuery添加到你的小提琴中。

假设您正在页面上加载jQuery，您应该检测window上的滚动而不是正文：

＆＃13;

$(window).scroll(function() {
  if ($(window).scrollTop() > 100) {
    $(".header").fadeIn();
  } else {
    $(".header").fadeOut();
  }
});

＆＃13;

div.header {
  width: 100%;
  position: fixed;
  height: 50px;
  background: blue;
  top: 0px;
  margin: 0;
  display: none;
}

p {
  width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='header'>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis cursus nisi sit amet suscipit. Etiam semper risus ac vulputate tincidunt. Duis sed neque sit amet lacus posuere egestas nec scelerisque nulla. Nam purus nunc, lobortis vel mauris
    sed, convallis imperdiet enim. Praesent nec erat ullamcorper, gravida turpis eu, mattis velit. Nulla porta pulvinar dolor quis scelerisque. Nullam at est at justo porttitor volutpat. Proin facilisis erat suscipit blandit porttitor. Maecenas egestas
    enim orci, ut egestas enim consequat a. Sed vehicula magna lorem, sed convallis erat porta non. Aenean quis consectetur nibh. Fusce nisl nulla, suscipit non vulputate eget, pellentesque et ligula. Curabitur sollicitudin urna ut sem euismod suscipit.
    Suspendisse eget lacus ut nisl luctus molestie. Vivamus convallis magna a dui ullamcorper, sed sagittis arcu volutpat. Suspendisse hendrerit erat sit amet rhoncus convallis. Praesent quis suscipit velit. Suspendisse quis porta eros, non pulvinar eros.
    Nam pellentesque pharetra dui, in interdum neque faucibus sit amet. Praesent quis orci nec neque posuere viverra. Integer volutpat sem id lectus congue, id vestibulum enim congue. Cras ultricies nunc justo, faucibus aliquam erat lobortis eu. Nullam
    mollis volutpat faucibus. In hac habitasse platea dictumst. Vivamus eu lectus et quam tristique mollis in eu dolor. Aliquam volutpat scelerisque diam porta rutrum. Phasellus sed est tincidunt, pretium mauris non, bibendum nibh. Pellentesque accumsan
    lacinia ultricies. Aenean et dolor ut quam dictum dapibus quis sit amet nisi. Praesent enim tellus, scelerisque et varius eu, porta vel ex. Vestibulum vel massa
  </p>

＆＃13;

Answer 2

使用window.scroll或document.scroll函数并使用doument或＆＃39; body＆＃39; fadeIn标题Document.scroll and body height fiddle的高度

＆＃13;

$(window).scroll(function(){
 if ($(document).scrollTop() > 100) {
   $(".header").fadeIn();
  }
 else {
	 $(".header").fadeOut();
	}
});

＆＃13;

div.header {
  width: 100%;
  position: fixed;
  height: 50px;
  background: blue;
  top: 0px;
  margin: 0;
  display: none;
}

p {
  width: 100px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<div class='header'>Header
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis cursus nisi sit amet suscipit. Etiam semper risus ac vulputate tincidunt. Duis sed neque sit amet lacus posuere egestas nec scelerisque nulla. Nam purus nunc, lobortis vel mauris
    sed, convallis imperdiet enim. Praesent nec erat ullamcorper, gravida turpis eu, mattis velit. Nulla porta pulvinar dolor quis scelerisque. Nullam at est at justo porttitor volutpat. Proin facilisis erat suscipit blandit porttitor. Maecenas egestas
    enim orci, ut egestas enim consequat a. Sed vehicula magna lorem, sed convallis erat porta non. Aenean quis consectetur nibh. Fusce nisl nulla, suscipit non vulputate eget, pellentesque et ligula. Curabitur sollicitudin urna ut sem euismod suscipit.
    Suspendisse eget lacus ut nisl luctus molestie. Vivamus convallis magna a dui ullamcorper, sed sagittis arcu volutpat. Suspendisse hendrerit erat sit amet rhoncus convallis. Praesent quis suscipit velit. Suspendisse quis porta eros, non pulvinar eros.
    Nam pellentesque pharetra dui, in interdum neque faucibus sit amet. Praesent quis orci nec neque posuere viverra. Integer volutpat sem id lectus congue, id vestibulum enim congue. Cras ultricies nunc justo, faucibus aliquam erat lobortis eu. Nullam
    mollis volutpat faucibus. In hac habitasse platea dictumst. Vivamus eu lectus et quam tristique mollis in eu dolor. Aliquam volutpat scelerisque diam porta rutrum. Phasellus sed est tincidunt, pretium mauris non, bibendum nibh. Pellentesque accumsan
    lacinia ultricies. Aenean et dolor ut quam dictum dapibus quis sit amet nisi. Praesent enim tellus, scelerisque et varius eu, porta vel ex. Vestibulum vel massa
  </p>

＆＃13;

jQuery fadeIn onscroll事件不起作用

2 个答案: