<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. Android之APP模块编译

    一,如何把app编进系统 a.源码编译,在packages/apps目录下有安卓原生的app,以Bluetooth为例,源码根目录下有Android.mk文件: packages\apps\Bluet ...

  2. 将svn的项目转移到另外一个仓库中

    前几天在做一个项目的时候,因为需要,需要将Server A 上SVN仓库 repos1中的项目pro1迁移到Server B 上的SVN仓库中,首先想到的是:通过复制,但是仔细一想,这样是不可能的:然 ...

  3. Ubuntu 16.04 如何使用Samba服务器

    对于Windows与Ubuntu之间的数据传输,我们习惯于使用FTP工具,不过还是有学员问到samba服务器搭建和使用的问题,这便是本文的来由. Ubuntu版本:ARM裸机1期加强版配套的Ubunt ...

  4. Meta标签中的format-detection属性及含义(转)

    一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

  5. UVa11077

    dp+置换 可以把排列分成几个循环,然后dp统计 dp[i][j]=dp[i-1][j-1]*(i-1)+dp[i-1][j],表示当前有i个元素,至少换j次,然后如果不在自己应该在的位置有i-1种情 ...

  6. C# 利用Aspose.Words .dll将本地word文档转化成pdf(完美破解版 无水印 无中文乱码)

    下载Aspose.Words .dll  http://pan.baidu.com/s/1c8659k 在vs2010中新建窗体应用程序,命名为 wordtopdf 添加Aspose.Words .d ...

  7. GetSafeHwnd()

    CreateCompatibleBitmap The CreateCompatibleBitmap function creates a bitmap compatible with the devi ...

  8. git中文件的三种状态

    用xcode的时候,左侧栏文件的邮右边时不时会看到M,A这一类的字母.当然,这些以后再写上.先说一下git里文件的三种状态 已提交(committed)  已经提交的本地仓库(repository), ...

  9. keepalived 原理、安装与使用

    1. keepalived工作原理 keepalived是集群管理中保证集群高可用的一个服务软件,其功能类似于heartbeat,用来防止单点故障. keepalived是以VRRP协议为实现基础的, ...

  10. 报错org.springframework.dao.DataIntegrityViolationException

    最简单的原因可能是数据库外键字段选择了不能为空, 改为允许为空就行了.