Home > Web Front-end > HTML Tutorial > 随页面滚动显示/隐藏窗口固定位置元素_html/css_WEB-ITnose

随页面滚动显示/隐藏窗口固定位置元素_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:26:00
Original
1837 people have browsed it

0.效果

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素。

1.html

<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p>
Copy after login

2.css

p#selected-case-count{      position:fixed;  /*固定元素位置*/      top:2px;  /*距顶端举例*/      right:40px; /*距右侧位置*/      color:red; }
Copy after login

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();    });});
Copy after login

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template