如何使用滚动顶部属性?

时间:2017-06-28 23:59:00

标签: javascript

希望关于scrollTop的简短问题。它是否表示元素与页面顶部的距离,但仅限于它已滚动?

1 个答案:

答案 0 :(得分:0)

对于任何元素,scrollTop指的是滚动量由其内容完成。

基本上,请考虑默认scrollTop为0的每个元素。然后添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><h2 class="h2-style">3 Strikes <span class="h3-style">Stops Repeat Offenders</span></h2></a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">News</a></li> <li><a href="#contact">Studies</a></li> <li><a href="#contact">Mike's Desk</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3S Law <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#contact">3S Law</a></li> <li><a href="#contact">3S Crimes</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Friends of 3S</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Book Page</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav> <!-- Begin page content. The travel for 500px is there to accommodate a large graphic (parallax--bg) for a proportional parallax scroll feature. It is critical for the effect.// --> <section class="bgimg"> <div class="parallax--bg feature-text"> <h1 class="h1-style">Three Strikes and <br>You're Out!</h1> </div> <!-- .parallax--bg //--> </section> <!-- .bgimg //-->。所以现在这个元素(我称之为容器),现在有一个滚动条。如果用户在元素内滚动,则容器的scrollTop 指的是该元素内容的视口与内容的绝对位置之间的差异。

对于一个只在主体上设置溢出的简单网站,只有window.scrollTop会有一些有意义的东西。

我希望这是有道理的。这是一个我目前无法找到的好形象。如果你需要视觉

,我会试着找到它