当前位置:Gxlcms > html代码 > 随页面滚动显示/隐藏窗口固定位置元素_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:150人阅读

0.效果

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

1.html

已选: 0

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(currTop600){            $("#selected-case-count").fadeIn(500);        }else{            $("#selected-case-count").fadeOut(500);        }        preTop=$(window).scrollTop();    });});

人气教程排行