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

how to make the content appear on scrolling down the webpage?

本文关键字：显示 网页 滚动      更新时间：2023-09-26

我看到过一个网站，当我向下滚动网页时，会出现内容。我有这个代码，但它不起作用。你能指导并给出适当的解释吗。

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

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

这是一个滚动动画库，你可以让内容出现在向下滚动的上

如何使用：

在HTML标签中添加"data-aos="animationname"就可以了：

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

添加后：

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

在标题部分添加：

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

在body标签结束之前。

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

你可以从中学习一些变化，但相关网站确实试图向你出售课程，如果这个链接不正确，请告诉我/或删除它：https://codepen.io/SitePoint/pen/MmxQMG

我将给出一个带有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

$(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");
     
    }
  });
});
body {
  height: 1200px;
}
#divToShowHide{
  top:100px;
position:fixed;
}
.BeforeScroll {
  height: 100px;
  width: 100%;
  display: none;
}
.AfterScroll {
  height: 100px;
  width: 100%;
  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>

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

http://scrollmagic.io/

https://scrollrevealjs.org/

祝你好运：））

相关文章：