如何在html中滚动显示文本

Question

您好,我希望当我滚动浏览它或滚动到文本所在的位置时会出现某个文本.出现时的效果应该有点像网站顶部的第一个效果http://namanyayg.com/.

我想用纯CSS和JS的最小代码效果,即没有jQuery.

我在想,也许我会使用类似于display:none属性的东西作为跨度,然后当你滚动过去它display变成block但我不知道如何使用javascript触发效果.任何帮助,将不胜感激.

Answer 1

首先将您要在滚动中显示的文本或内容包装在一个div中,以便您可以根据滚动显示隐藏div.为目标div写两个类.

你的CSS:

/*Use this class when you want your content to be hidden*/
.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;
}

你的HTML:

<!--Set class BeforeScoll to your target div-->

<div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll</div>

你的脚本:

<!--include these script in head section or wherever you want-->

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> 

<script type = "text/javascript">
$(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 {
     s.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
 });
});
</script>

希望它能解决你的问题.

Answer 2

我会推荐这个插件

http://johnpolacek.github.io/superscrollorama/

编辑:

我不知道没有人注意到必须在不使用像jQuery这样的外部库的情况下完成解决方案.但是,基本功能非常简单.在这里找到它

HTML:

<div id="parent-div">
<div id="child-div">
Psst .. I am here!!
</div>
</div>

CSS:

#parent-div
{
  position:relative;
  height:3000px;
  width:300px;
  background-color:red;
}

#child-div
{
  color:white;
  position:relative;
  top:1000px;
  width:300px;
  display:none;
  text-align:center;
}

JS:

var body=document.getElementsByTagName("body")[0];
var parent=document.getElementById("parent-div");
var child=document.getElementById("child-div");
body.onscroll = function(){
//console.log(documenhttps://fiddle.jshell.net/3urv0tp0/#tidyt.getElementById("child-div").style.top)
if(document.documentElement.scrollTop>=child.offsetTop)//Adjust Tolerance as you want
{
   child.style.display="block"
}

};