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. c#判断是否有网络

    //调用操作系统API [System.Runtime.InteropServices.DllImport("wininet")] private extern static bo ...

  2. MySQL-监控告警系统

    开源地址: https://github.com/ycg/mysql_web QQ: 779647966 Email: ycg166911@163.com 利用python的flask进行后台开发,前 ...

  3. ratio_to_report 分析函数求占比

    drop table test; create table test ( name varchar(20), kemu varchar(20), score number  ); insert int ...

  4. IE 浏览器旧版本下载

    1. http://www.oldversion.com/windows/internet-explorer/ IE10 浏览器 32bit & 64 bit:下载 2. https://ww ...

  5. [原]获取openstack-pike安装包

    linux version: CentOS 7.5.1804 #进入仓库配置目录 cd /etc/yum.repo.d/ #批量重命名所有文件 for files in `ls *`; do mv $ ...

  6. [转]50个极好的bootstrap 后台框架主题下载

    50个极好的bootstrap 后台框架主题下载 http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程师开始用bootstr ...

  7. 如何在spring-boot web项目中启用swagger

    swagger的三个项目及其作用 我们打开swagger的官网,会发现有三个swagger相关的项目,它们分别是 swagger-editor 作用是通过写代码,生成文档描述(一个json文件或其他格 ...

  8. 剪格子---(dfs回溯)

    如图p1.jpg所示,3 x 3 的格子中填写了一些整数. 我们沿着图中的红色线剪开,得到两个部分,每个部分的数字和都是60. 本题的要求就是请你编程判定:对给定的m x n 的格子中的整数,是否可以 ...

  9. JS setAttribute兼容

    问题和表现: 最近实践中遇到的问题,setAttribute()设置在IE7中,无法设置style等属性.这样就对设置样式带了很大的困扰,例如绑定点击事件来隐藏元素,setAttribute(”sty ...

  10. 微信小程序之点赞和取消点赞

    wxml代码 <image wx:if="{{collection}}" src="/images/boy.png" bindtap="toCo ...