zoukankan      html  css  js  c++  java
  • 52.JQ---向上滚动显示,向下滚动隐藏

    js:

    var windowTop = 0;
    $(window).scroll(function() {
    var scrolls = $(this).scrollTop();

    if(scrolls <= 0) {
    $("header").removeClass("showFixed").css({
    "top": "43px"
    })
    } else {
    if(scrolls >= windowTop) {
    windowTop = scrolls;
    var screenWidth=$(document).width;
    if(screenWidth>768){
    $("header").removeClass("showFixed").addClass("hiddenFixed").css({
    "top": "-113.72px"
    })
    }else{
    $("header").removeClass("showFixed").addClass("hiddenFixed").css({
    "top": "-245.72px"
    })
    }


    } else {
    windowTop = scrolls;

    $("header").addClass("showFixed").removeClass("hiddenFixed").css({
    "top": "0px"
    })
    }
    }

    });
    css:
    header{
    background-color: rgba(0, 117, 193, 0.84);
    right: 0;
    left: 0;
    top: 0;
    transition: top 0.5s;
    z-index: 999;
    }
    .hiddenFixed{
    position: fixed;
    100%;
    top: 0;
    }
    .showFixed{
    position: fixed;
    100%;
    top: 0;
    }
  • 相关阅读:
    取球问题
    汉字首字母
    上三角
    循环小数
    拓扑排序
    倒水
    equals方法使用技巧
    Java库中的集合
    win10安装Redis方法以及基本配置
    c、c++函数随机
  • 原文地址:https://www.cnblogs.com/sqyambition/p/9341539.html
Copyright © 2011-2022 走看看