如何使文本出现在滚动在html [英] How to make text appear on scroll in html

问题描述

您好，我想要滚动浏览某个文本或滚动到文本所在的位置时才显示某个文本。出现时的效果应类似于网站顶部的第一个效果 http://namanyayg.com/ 。

我想在纯CSS和JS的最小代码中使用效果，即没有jQuery。

我在想，也许我会使用东西像一个跨度的 display：none 属性，然后当你滚动过来时， display 变成 block 但我不知道如何使用javascript来触发效果。
任何帮助将不胜感激。

解决方案

首先在一个div中包含要滚动显示的文本或内容，以便显示隐藏div取决于滚动。

您的CSS：

  / *当你想要你的内容被隐藏时使用这个类* / 
 .BeforeScroll 
 {
 height：100px; / *无论你想要什么* / 
 width：100％; / *无论你想要什么* / 
。 
。 
 display：none; 
} 
 
 
 / *当您希望您的内容在滚动后显示时使用此类* / 
 .AfterScroll 
 {
 height：100px; / *无论你想要什么* / 
 width：100％; / *无论你想要什么* / 
。 
。 
 display：block; 
} 
  

您的HTML：
$ b

 <！ - 将类BeforeScoll设置为目标div  - > 
 
< div id =divToShowHideclass =BeforeScroll>要在滚动上显示的内容< / div> 
   

您的指令码：

 <！ - 将这些脚本包含在头部或任何您想要的位置 - > 
 
< script src =http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.jstype =text / javascript> ;< / script> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 //将你的div转换为一个js变量
 var div = $（＃divToShowHide）; 
 //您的div在变量
中的当前位置（垂直位置）var pos = div.position（）; 
 //现在滚动事件触发器执行以下
 $（窗口）。 scroll（function（）{
 var windowpos = $（window）.scrollTop（）; 
 //现在如果你滚动超过100像素垂直改变类AfterScroll 
 //采用100px滚动，你可以采取任何你需要的
 if（windowpos> =（pos.top  -  100））{
 div.addClass（AfterScroll）; 
} 
 //如果滚动小于100px，删除类AfterScroll，以便您的内容将再次隐藏
 else {
 s.removeClass（AfterScroll）; 
} 
 //注意：如果你想要的内容应该总是显示一次你滚动，不想再次隐藏它，当去顶级agian，不需要写else部分
}）; 
} ; 
< / script> 
  

希望它能解决你的问题。

Hello, I want a certain text to appear when I scroll past it or when I scroll until the point where the text is. The effect when appearing should be somewhat like the first effect on the top of the website http://namanyayg.com/.

I want the effect in minimal code with pure CSS and JS i.e no jQuery.

I was thinking that maybe I would use something like a display:none property for a span and then when you scroll past it the display becomes block but I dont know how to trigger the effect using javascript. Any help would be appreciated.

解决方案

First wrap whatever your text or content that you want to show on scroll, in one div so that you can show hide the div depending upon the scroll. Write two classes for your target div.

Your 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;
}

Your HTML:

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

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

Your Script:

<!--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>

Hope it will solve your problem.

这篇关于如何使文本出现在滚动在html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！