<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. 洛谷P2473奖励关——状压DP

    题目:https://www.luogu.org/problemnew/show/P2473 还是对DP套路不熟悉... 像这种前面影响后面,而后面不影响前面的问题就应该考虑倒序递推: 看n只有15那 ...

  2. web安全之跨站请求伪造

    CSRF(Cross-site request forgery),中文名称:跨站请求伪造.因为这个不是用户真正想发出的请求,这就是所谓的请求伪造;因为这些请求也是可以从第三方网站提交的,所以前缀跨站二 ...

  3. nodejs QueryString模块 详解

    QueryString模块 "QueryString" 模块用于实现URL参数字符串与参数对象的互相转换 此类一共包括4个方法: querystring.stringify(obj ...

  4. css3 appearance 改变元素外观

    h5 input标签的默认样式去除: 去掉date类型<input>框的叉叉: ::-webkit-clear-button { -webkit-appearance: none; } 去 ...

  5. 怎么在notepad里面,将字符串替换成换行

    用Notepad++可以,利用查找和替换功能,选择正则表达式,查找目标框里输入你想要替换的字符串,替换为框里输入\r,点击替换即可.这是个 很强大的功能,利用还它可以批量替换任何字符串,比如你链接是& ...

  6. mysite-exampleservice和mysite-vsg

    可能找到了这两个nova安装的地方,下午分析 搜素site_name test 这条线 cord-compute-maas-playbook这条线 这个可以作为验证

  7. RxJava入门之路(一)

    RxJava接触过蛮长时间了,但是让我说个所以然来还是说不出来,归根结底还是还是理解不够深刻,趁着年底这个时候争取写个系列出来给自己的学习做个记录 注意区分RxJava1.0和2.0的区别,以下默认是 ...

  8. E20170509-hm

    slice   vt. 切成片; 切下; 划分;  n. 薄片,切片 slicing  n. 切割; 限幅,限制; inspect    v. 视察; 检查 inspector  n. 检查员; (英 ...

  9. Codeforces gym 101061 G【递推公式+逆元】

    题意: 就是n复制m次,然后数mod1e9+7; 思路: 案例:31*10^6 + 31*10^4 + 31*10^2 + 31*10^0 所以就是一个等比数列,然后整理一下就是n*(10^(m*le ...

  10. Codeforces404C【构造】

    题意: 一个图有n个点,每一个点最多连接k条直线,给出多有起点到终点的距离,没有环,不能输出重边,输出所有有连接的单向边 思路: 就是简单想-不知道怎么说了,画个图,我们建边,那么距离是 i 就是连距 ...