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

WBOY

Release： 2016-06-24 11:26:00

Original

1840 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

Related labels：

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

source：php.cn

Previous article：Http协议中关于Content-Length的解读_html/css_WEB-ITnose Next article：聊聊Iconfont_html/css_WEB-ITnose

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