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. Docker入门简记

    Docker的容器环境实际上是借助类Linux命名空间,将各种系统资源按照容器不同划分了不同的命名空间进行隔离,为各个进程提供独立的运行环境关键概念:容器,镜像两个概念一起看,镜像好比平常系统中的各个 ...

  2. Spark性能优化指南——基础篇

    本文转自:http://tech.meituan.com/spark-tuning-basic.html 感谢原作者 前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一 ...

  3. oracle查看某表字段类型

    来源:https://www.cnblogs.com/ufindme/p/5033843.html 今天遇到一个问题:要求在可重复执行的SQL脚本添加一段SQL代码:修改当前的数据类型.因为SQL代码 ...

  4. AES和RSA加解密的Python用法

    AES AES 是一种对称加密算法,用key对一段text加密,则用同一个key对密文解密, from Crypto import Random from Crypto.Hash import SHA ...

  5. iOS开发之--在UIWindow上展示/移除一个View

    代码如下: 展示 UIWindow *window = [[UIApplication sharedApplication].windows lastObject]; [window addSubvi ...

  6. 关于SpringBoot 2.0,Pageable 无法注入,提示缺少默认构造方法的解决办法

    在SpringBoot 2.0 以前,我们会配置以下类 * @date 2018/06/03 */ @Configuration public class WebMvcConfig extends W ...

  7. 三种不同类型的ssh隧道

    何谓SSH隧道 隧道是一种把一种网络协议封装进另外一种网络协议进行传输的技术.这里我们研究ssh隧道,所以所有的网络通讯都是加密的.又被称作端口转发,因为ssh隧道通常会绑定一个本地端口,所有发向这个 ...

  8. python爬虫工具

    一直都听说python写爬虫工具非常方便,为了获取数据,我也要写点爬虫,但是python太灵活了,不知道python爬虫要哪些框架,要了解,比如beatiful soup,scrapy, 爬虫的额主要 ...

  9. 扫描系统进程和获取某进程的PID

    扫描系统的所有进程 #include <stdio.h> #include <windows.h> #include <tlhelp32.h> int scan() ...

  10. linux 系统全盘恢复

    恢复备份 一.准备 1. 从 u盘启动,进入 live-cd 系统,配置好网络和镜像源,更新一下仓库的数据库. sudo pacman -Syy 2. 安装 timeshift 这个软件. sudo ...