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等外部库的情况下制作解决方案。但是，基本功能非常简单。找到它 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" } };

Answer 3

我也在寻找这个。在这里，我试图使“滚动到具有淡入淡出效果的（number）px后显示文本”。我希望它能对我有用：)如果您向后滚动动画，它将再次播放该动画，idk如何使其像在Web中一样显示为xd（如果发现，我会进行编辑）

HTML：

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

CSS：

.toptexts2 {
   animation: fadeEffect 3s; /* fading effect takes 3s */
}

@keyframes fadeEffect { /* from 0 to full opacity */
   from {opacity: 0;}
   to {opacity: 1;}
}

JS：

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

Answer 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';
  }
}

我把左边的东西留在那里，以防万一，但你可以删除它。

Answer 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");
            }

如何在html中滚动显示文本

5 个答案: