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;
width: 100%;
top: 0;
}
.showFixed{
position: fixed;
width: 100%;
top: 0;
}
52.JQ---向上滚动显示,向下滚动隐藏的更多相关文章
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- js-scroll判断页面是向上滚动还是向下滚动
原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...
- jq判断鼠标滚轴向上滚动还是向下滚动
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...
- vue 中判断向上滚动还是向下滚动
<script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scr ...
- jQuery带控制按钮向上和向下滚动文本列表
效果:http://hovertree.com/texiao/jquery/64/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head&g ...
- JS如何判断鼠标滚轮向上还是向下滚动
前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...
- repeater控件 + marquee标签 实现文字滚动显示
各种信息网站.BBS等网站上的公告信息模块的实现 拖出一个repeater控件绑定数据库中要显示的信息 在repeater的 <ItemTemplate> ... </ItemTem ...
- JS滚动显示
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- jquery 上下滚动显示隐藏
function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...
随机推荐
- Spark On Yarn的两种模式yarn-cluster和yarn-client深度剖析
Spark On Yarn的优势 每个Spark executor作为一个YARN容器(container)运行.Spark可以使得多个Tasks在同一个容器(container)里面运行 1. Sp ...
- permutohedral lattice理解
[完结]saliency filters精读之permutohedral lattice 2012年09月28日 22:40:08 工长山 阅读数:12432 版权声明:本文为博主原创文章,未经 ...
- 用xstart远程连接linux图形用户界面
转载:https://blog.csdn.net/yabingshi_tech/article/details/51839379 双击xstart 输入:/usr/bin/xterm -ls -dis ...
- Elasticsearch学习笔记——常用命令
1.创建一个名字为index的topic curl -XPUT http://localhost:9200/index 2.创建一个mapping curl -XPOST http://localho ...
- 安装svn客户端后,代码不能提交
转载:https://jingyan.baidu.com/article/e8cdb32b3312f637052badde.html
- redis服务器学习一
一:什么是redis服务器 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zs ...
- python中导入一个需要传参的模块
最近跑实验,遇到了一个问题:由于实验数据集比较多,每次跑完一个数据集就需要手动更改文件路径,再将文件传到服务器,再运行实验,这样的话效率很低,必须要专门看着这个实验,啥时候跑完就手动修改运行下一个实验 ...
- 使用PgBouncer连接池
1.pgbouncer 的介绍 pgbouncer是一个针对PostgreSQL数据库的轻量级连接池,任何目标应用都可以把 pgbouncer 当作一个 PostgreSQL/Greenplum 服务 ...
- 开学收好这 17 种工具 App,让你新学期学习更有效率
开学啦!不管是想勾搭学长还是想讨好学妹,相信同学们对新学期.新同学或者新学校都已经满怀期待了.但是,除了帅气逼人的学长和青春靓丽的学妹,你们可不能忘记上学的首要任务还是学习噢. 那么,为了帮助同学们更 ...
- 我的C语言编程风格
前几天看别人的代码,真是的看的头昏脑涨,基本没有注释.乱起的变量名字,还要费尽心思去解读作者的意思.突然感觉高效的程序注释说明和良好的编程风格是多么的重要. 为了不让别人在看到我的代码时在背后骂我,也 ...