Question

当我向下滚动网页时，我看到了网站的内容。我有这个代码，但它无法正常工作。你能指导并给出适当的解释。

$(document).ready(function(){
  //Take your div into one js variable
  var div = $("#divToShowHide");
  //Take the current position (vertical position from top) of your div in the variable
  var pos = div.position();
  //Now when scroll event trigger do following
  $(window).scroll(function () {
   var windowpos = $(window).scrollTop();
   //Now if you scroll more than 100 pixels vertically change the class to AfterScroll
   // I am taking 100px scroll, you can take whatever you need
   if (windowpos >= (pos.top-100)) {
     div.addClass("AfterScroll");
   }
   //If scroll is less than 100px, remove the class AfterScroll so that your content will be hidden again 
   else {
     div.removeClass("AfterScroll");
   }
   //Note: If you want the content should be shown always once you scroll and do not want to hide it again when go to top agian, no need to write the else part
 });
});

.BeforeScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  display: none;
}


/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll
 </div>

Answer 1

如果你想制作一些动画，我建议你AOS

它是一个Animate On Scroll Library，您可以在向下滚动时显示内容

使用方法：

添加＆＃34; data-aos =＆＃34;动画名称＆＃34;＆＃34; HTML标签可以解决这个问题：

<div class="topBar" data-aos="fade-in">

添加后：

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

在head部分并添加：

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

在身体标签结束之前。

一个简单的例子： https://codepen.io/karenmio/pen/KxGewG

您可以从中学到各种变化，但相关网站会尝试向您推销课程，请告知我此链接是否正确/或将其删除： https://codepen.io/SitePoint/pen/MmxQMG

Answer 2

＆＃13;

$(document).ready(function() {

  var div = $("#divToShowHide");

  var pos = div.position();

  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    console.log(pos.top)
    if (windowpos > pos.top && pos.top+500 > windowpos) {
      div.addClass("AfterScroll");
       div.removeClass("BeforeScroll");
     
    } else {
       div.addClass("BeforeScroll");
      div.removeClass("AfterScroll");
     
    }
  });
});

＆＃13;

body {
  height: 1200px;
}
#divToShowHide{
  top:100px;
position:fixed;
}
.BeforeScroll {
  height: 100px;
  width: 100%;
  display: none;
}
.AfterScroll {
  height: 100px;
  width: 100%;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divToShowHide" class="BeforeScroll">Content you want to show hide on scroll
</div>

＆＃13;

Answer 3

我将以scrollrevealjs

为例

包括这样的库：

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>

然后在你的js文件中初始化库

window.sr = ScrollReveal();

然后只需添加您喜欢的组件类来设置动画

sr.reveal('.YourClass1');
sr.reveal('.YourClass2');

在这里，您将找到如何使用此库：）

https://github.com/jlmakes/scrollreveal.js

Answer 4

您可以使用一些流行的JS库，例如：

http://istresearch.com/blog/2015/4/19/reaching-milestones

http://scrollmagic.io/

祝你好运：）））

如何在滚动网页时显示内容？

4 个答案: