这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素,下面通过本文给大家介绍 JS 实现随页面滚动显示 / 隐藏窗口固定位置元素,需要的朋友参考下吧
窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素。
先给大家展示下效果图:
1.html
- <p id="selected-case-count">
- <span class='form-control'>
- 已选:
- <span class="casecount">
- 0
- </span>
- </span>
- </p>
2.CSS
- p#selected -
- case - count {
- position: fixed;
- /*固定元素位置*/
- top: 2px;
- /*距顶端举例*/
- right: 40px;
- /*距右侧位置*/
- color: red;
- }
3.js
- $(function() {
- $("#selected-case-count").hide();
- });
- var preTop = 0;
- var currTop = 0;
- $(function() {
- $(window).scroll(function() {
- currTop = $(window).scrollTop();
- if (currTop < preTop) {
- $("#selected-case-count").fadeOut(200);
- }
- elseif($(window).scrollTop() > 600) {
- $("#selected-case-count").fadeIn(500);
- } else {
- $("#selected-case-count").fadeOut(500);
- }
- preTop = $(window).scrollTop();
- });
- });
以上所述是小编给大家分享的 JS 实现随页面滚动显示 / 隐藏窗口固定位置元素的相关知识,希望对大有所帮助!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0704/266945.html