<script>
$(function () {
var barTop = $('#bar').offset().top;
//on方法相当于原生的绑定
$(window).on('scroll',function () {
var scrollTop = $(document).scrollTop();
if (scrollTop >= barTop) {
//固定在上方
$('#bar').css({position: 'fixed',top: 0});
// 显示替代的条
$('#replace_bar').css('display','block');
} else {
$('#bar').css('position','static');
// 隐藏替代的条
$('#replace_bar').css('display','none');
}
});
});
</script>

吸顶条 ---- jQ写法的更多相关文章

  1. 原生js实现吸顶导航和回到顶部特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  3. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

  5. 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

    如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...

  6. status bar、navigationBar、tableView吸顶view设置

    1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)view ...

  7. collectionview cell吸顶效果

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Hiragino Sans GB"; color: #cf8724 } ...

  8. ECSTORE导航吸顶功能

    ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...

  9. React制作吸顶功能总结

    总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下, 主页面代码如下: class Head e ...

随机推荐

  1. HNOI2008 明明的烦恼 (purfer序列 + 组合数学)

    传送门 这道题题意描述很清楚,不过我自己做的时候确实是一头雾水……又看了题解,发现要用到一个新知识,叫purfer序列. 我们来简单说一下什么是purfer序列.它可以被看作一种树的表现形式.一棵含有 ...

  2. PostgreSQ 连接问题 FATAL: no pg_hba.conf entry for host

    PostgreSQ数据库为了安全,它不会监听除本地以外的所有连接请求,当用户通过JDBC访问是,会报一些如下的异常: org.postgresql.util.PSQLException: FATAL: ...

  3. 019--python内置函数

    一.内置高阶函数 map函数:接收两个数据 函数和序列,map()将函数调用'映射'到序列身上,并返回一个含有所有返回值的一个列表 num1 = [1,2,3,4,5] num2 = [5,4,3,2 ...

  4. 任务47:Identity MVC:ReturnUrl实现

    任务47:Identity MVC:ReturnUrl实现 在最上面加一个私有的方法 登陆也加上returnUrl Login的post方法.加入returnUrl的参数 登陆界面也需要加上 asp- ...

  5. Spring Boot 学习系列(序)—Spring Boot

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Spring Boot? Spring Boot 是由pivotal团队提供的一个基于Spring的全新框架 ...

  6. BFS+PRIM

    转载请注明出处:優YoU http://user.qzone.qq.com/289065406/blog/1299324104 在一个y行 x列的迷宫中,有可行走的通路空格' ',不可行走的墙'#', ...

  7. (3)javascript的数据类型

    本篇学习资料主要讲解javascript中的数据类型 Javascript的数据类型 Javascript的数据类型:即一个数据不必首先做声明,可以在使用或赋值时再确定其数据的类型,当然也可以先声明该 ...

  8. pycharm命令行快捷启动

    打开 本用户目录下的.bashrc文件 vim .bashrc 在末尾添加一行 alias pycharm="the-path-to-pycharm.sh" 最后保存退出 然后更新 ...

  9. 洛谷 P3375 【模板】KMP字符串匹配 || HDU 1686 Oulipo || kmp

    HDU-1686 P3375 kmp介绍: http://www.matrix67.com/blog/archives/115 http://www.cnblogs.com/SYCstudio/p/7 ...

  10. Suricata的总体架构

    Suricata的总体架构  报文检测系统通常四大部分,报文获取.报文解码.报文检测.日志记录:suricata不同的功能安装模块划分,一个模块的输出是另一个模块的输入,suricata通过线程将模块 ...