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. spring boot 项目启动无任何反应

    遇到的问题 spring boot项目启动后无任何报错,ps有进程,nohub无日志 定位 更换jar包,问题依然存在,将jar包放到其他服务器,运行正常,排除打包问题 同服务器其他系统运行正常,但停 ...

  2. [Linux]systemd和sysV

    转自:https://www.cnblogs.com/EasonJim/p/7168216.html 在Debian8中systemd和sysVinit同时存在,NTP就是在/etc/init.d/n ...

  3. C# 正则表达式判断是否是数字、是否含有中文、是否是数字字母组合

    //判断输入是否包含中文 不管你有没有输入英文,只要包含中文,就返回 true public static bool HasChinese(string content) { //判断是不是中文 st ...

  4. Houdini 过程化地形系统(二):基于UE4的FC5植被系统(1)

    背景 通过之前的几篇分析实践,已经基本打通了UE4的Houdini植被管线部分,并对Far Cry5(简称FC5)的植被系统的需求做了整理,在接下来的几节中,会关注于如何使用Houdini基于UE4来 ...

  5. swiper4自动轮播切换手动触碰后停止踩坑——属性disableOnInteraction

    swiper4轮播设置autoplay自动切换后,即默认设置: <script> var mySwiper = new Swiper('.swiper-container', { auto ...

  6. VS每次F5都重新编译代码,即使没有任何修改

    遇到一个奇怪现象,不知道怎么设置了,突然工程的Release模式下,F5每次都要重新编译代码,而且是全部代码都重新编译 而Debug模式没问题 重启VS,重启机器,清理工程重新生成工程都无法解决 最后 ...

  7. redis数据操作笔记

    redis是key-value的数据结构,每条数据都是一个键值对键的类型是字符串 注意:键不能重复,值的类型分为五种:字符串string 哈希hash 列表list 集合set 有序集合zset 一. ...

  8. Redis密码设置与访问限制

    https://www.cnblogs.com/ghjbk/p/7682041.html https://ruby-china.org/topics/28094

  9. C# 求俩个正整数的最小公倍数和最大公约数

    C# 求俩个正整数的最小公倍数和最大公约数 1.公倍数.最小公倍数 两个或多个整数公有的倍数叫做它们的公倍数,其中除0以外最小的一个公倍数就叫做这几个整数的最小公倍数 翻开小学5年级下册PPT 1.1 ...

  10. 排序算法--插入排序(Insertion Sort)_C#程序实现

    排序算法--插入排序(Insertion Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来 ...