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;
width: 100%;
top: 0;
}
.showFixed{
position: fixed;
width: 100%;
top: 0;
}

52.JQ---向上滚动显示,向下滚动隐藏的更多相关文章

  1. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  2. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  3. js-scroll判断页面是向上滚动还是向下滚动

    原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...

  4. jq判断鼠标滚轴向上滚动还是向下滚动

    $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...

  5. vue 中判断向上滚动还是向下滚动

    <script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scr ...

  6. jQuery带控制按钮向上和向下滚动文本列表

    效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...

  7. JS如何判断鼠标滚轮向上还是向下滚动

    前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...

  8. repeater控件 + marquee标签 实现文字滚动显示

    各种信息网站.BBS等网站上的公告信息模块的实现 拖出一个repeater控件绑定数据库中要显示的信息 在repeater的 <ItemTemplate> ... </ItemTem ...

  9. JS滚动显示

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  10. jquery 上下滚动显示隐藏

      function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...

随机推荐

  1. Windows server 2008普通用户不能远程登录问题

    1.查登录权限 如果文件服务器没有为用户授权,那么用户自然就不能远程登录服务器系统了,为此笔者决定先仔细检查一下文件服务器系统是否为自己使用的登录账号,授予了远程登录权限.在进行这种检查时,笔者先是在 ...

  2. JSP之开发环境搭建

    1.下载JDK1.8(或JDK1.7),并进行安装和配置,主要是配置环境变量JAVA_HOME及Path. 2.下载并配置Tomcat8.0(或Tomcat7.0). Windows平台请下载Tomc ...

  3. Houdini技术体系大纲

    Houdini for UE4 Pipeline的系列教程,前言等想好再写吧

  4. windows ngix 安装 配置 使用

    参考版本nginx-1.10.3 一.常用命令 start nginx.exe                      //开启服务 nginx.exe -s stop                ...

  5. 解决ubuntu开机进入grub界面的问题

    开机显示GRUB界面显示如下字样,几秒后自动进入登录界面 *Ubuntu Advanced options for Ubuntu .... 解决方案: 1.编辑grub文件 sudo vim /etc ...

  6. ganglia问题汇总

    1.有数据,不出图 排查方法: 1)确保 php-gd 插件已安装 2) 确保rrdtool 的命令路径是正确的 3)确保php.ini中passthru函数是否开启,参数safe_mode 是否为o ...

  7. 【netcore基础】CentOS 7.6.1810 搭建.net core 2.1 linux 运行环境 nginx反向代理 supervisor配置自启动

    之前写过一篇Ubuntu的环境搭建博客,感觉一些配置大同小异,这里重点记录下 nginx 作为静态 angular 项目文件服务器的配置 参考链接 [netcore基础]ubuntu 16.04 搭建 ...

  8. linux软链接的创建、删除和更新

    大家都知道,有的时候,我们为了省下空间,都会使用链接的方式来进行引用操作.同样的,在系统级别也有.在Windows系列中,我们称其为快捷方式,在Linux中我们称其为链接(基本上都差不多了,其中可能有 ...

  9. 【CF666C】Codeword 结论题+暴力

    [CF666C]Codeword 题意:一开始有一个字符串s,有m个事件,每个事件形如: 1.用一个新的字符串t来替换s2.给出n,问有多少个长度为n的小写字母组成的字符串满足包含s作为其一个子序列? ...

  10. cf 893 E

    有  次询问,第  次询问包含两个数  . 求满足下面两个要求的  数组的方案数. 1.  数组由  个整数构成 2.  A与B不同当且仅当至少存在一个数  满足  .答案对  取模 数据范围:  显 ...