如何使文本出现在html中的滚动条上

Posted 2023-05-08

【中文标题】如何使文本出现在html中的滚动条上

【英文标题】：How to make text appear on scroll in html

【发布时间】：2013-12-16 22:28:58

【问题描述】：

您好，我希望在滚动过去或滚动到文本所在位置时显示某个文本。出现时的效果应该有点像网站顶部的第一个效果http://namanyayg.com/。

我希望使用纯 CSS 和 JS（即没有 jQuery）以最少的代码实现效果。

我在想也许我会使用类似display:none 属性的跨度，然后当您滚动过去时，display 变为block，但我不知道如何使用 javascript 触发效果。 任何帮助，将不胜感激。

【问题讨论】：

看看MDN's onscroll event page - 它有一个在滚动超过某个点后显示某些内容的示例。

确保您没有直接在 onscroll 事件侦听器中执行此检查。在ejohn.org/blog/learning-from-twitter

了解更多信息

【参考方案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>

希望它能解决你的问题。

【讨论】：

除了 jQuery，这绝对是最好的深思熟虑和有用的答案。它实际上包括 cmets 并且格式很好。任何不/不能使用 jQuery 的人都不应该有太多的麻烦来适应它以使用纯 JS。

【参考方案2】：

我会推荐这个插件

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

编辑：

我不知道为什么没有人注意到必须在不使用 jQuery 等外部库的情况下制定解决方案。但是，具有基本功能的解决方案非常简单。找到它here

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"


;

【讨论】：

问题说“没有 jQuery”

【参考方案3】：

我也在找这个。在这里，我试图制作“滚动到具有淡入淡出效果的（数字）px 后显示文本”。我希望它能像它对我一样工作:) 如果你滚动回动画，动画将再次播放，我知道如何让它就像在 web 中一样，你显示 xd（如果我发现，我会编辑）

    window.addEventListener("scroll", function() showFunction());

    function showFunction() 
        if (document.body.scrollTop > 900 || document.documentElement.scrollTop > 900) 
            document.getElementById("toptexts2").style.display = "block";
         else 
            document.getElementById("toptexts2").style.display = "none";
        
    

    .toptexts2 
       animation: fadeEffect 3s; /* fading effect takes 3s */
    
    
    @keyframes fadeEffect  /* from 0 to full opacity */
       from opacity: 0;
       to opacity: 1;
    

    <div class="toptexts2" id="toptexts2">
     <div>Hi!</div>
     <div>↓ go down ↓</div>
    </div>

【讨论】：

3 年后给予这个荣誉，因为它使用 vanilla JS 并且没有外部库。很棒的东西。

【参考方案4】：

我喜欢这个：

var doc = document, dE = doc.documentElement, bod = doc.body;
function E(e)
  return doc.getElementById(e);

function xy(e, d)
  if(!d)d = 'Top';
  d = 'offset'+d;
  var r = e[d];
  while(e.offsetParent)
    e = e.offsetParent; r += e[d];
  
  return r;

function x(e)
  return xy(e, 'Left');

function y(e)
  return xy(e);

var txt = E('theId'), txtS = txt.style;
onscroll = function()
  var left = dE.scrollLeft || bod.scrollLeft || 0;
  var top = dE.scrollTop  || bod.scrollTop  || 0;
  var w = innerWidth || dE.clientWidth || bod.clientWidth;
  var h = innerHeight || dE.clientHeight || bod.clientHeight;
  if(top > y(txt)-h)
    txtS.display = 'none';
  
  else
    txtS.display = 'block';
  

我把剩下的东西留在了那里，以防万一，但你可以把它拿走。

【讨论】：

唯一不使用jQuery的答案（正如提问者规定的那样）。太糟糕了，它很难阅读，没有解释它所做的任何事情，并且缺少必要的 html 和 CSS。

【参考方案5】：

var div=$("#divtochange");
$(window).scroll(function () 
            var windowpos = $(window).scrollTop();
            //---check the console to acurately see what the positions you need---
            console.log(windowpos);
            //---------------------

//Enter the band you want the div to be displayed
            if ((windowpos >= 0) && (windowpos <= 114)) 
                div.addClass("AfterScroll");
            
            else
                div.removeClass("AfterScroll");
            

【讨论】：

很好，但问题是“没有 jQuery”

@Lambat 两年后读到这篇文章，仍然无法相信没有人真正回答过 OP 的问题。

@Lambat 相信问题是后来修改的，因为大家没有看到jQuery需求是没有意义的:D

@ProllyGeek 信不信由你，他的问题历史另有说明...***.com/posts/20307555/revisions

@Lambat 哇！无论如何，我已经添加了一个快速修改，以防万一有人在寻找相同的答案。