<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. Hadoop学习资料(持续更新)

    Alex的Hadoop菜鸟教程 Hadoop资料合集 Hadoop平台和应用程序框架

  2. Balancing Act(树的重心)

    传送门 Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14070   Accepted: 593 ...

  3. scp.sh

    #!/bin/sh #Auto change server files #liudong 2016-3-21 if [ ! -f ip.txt ];then echo -e "\033[31 ...

  4. 算法练习--LeetCode--54. Spiral Matrix 100%

      Spiral MatrixMedium Given a matrix of m x n elements (m rows, n columns), return all elements of t ...

  5. SCUT - 261 - 对称与反对称 - 构造 - 简单数论

    https://scut.online/p/261 由于M不是质数,要用扩展欧几里得求逆元,而不是费马小定理! 由于M不是质数,要用扩展欧几里得求逆元,而不是费马小定理! 由于M不是质数,要用扩展欧几 ...

  6. mycat启动报错UnknownHostException(Temporary failure in name resolution)解决方法

    重启命令 ./mycat restart 查看日志 cd logs tail -f wrapper.log 报错信息 INFO | jvm 2 | 2018/05/09 11:28:28 | Erro ...

  7. try/except/finally

    Python也不例外,跟其他高级语言一样,内置了一套try...except...finally...的错误处理机制 当认为某些代码可能会出错时,就可以用try来运行这段代码 使用try时,要么exc ...

  8. Caffe实战一(环境准备及CPU模式下编译)

    经过前几天的折腾,终于把Ubuntu16.04开发环境给搭建了起来,包括win10+Ubuntu双系统的安装.系统安装后的优化等等. 详见之前的文章:Ubuntu16.04.2 LTS 64bit系统 ...

  9. [转]Adaboost 算法的原理与推导

    看了很多篇解释关于Adaboost的博文,觉得这篇写得很好,因此转载来自己的博客中,以便学习和查阅. 原文地址:<Adaboost 算法的原理与推导>,主要内容可分为三块,Adaboost ...

  10. 如何用Python在10分钟内建立一个预测模型

    转载自:https://baijia.baidu.com/s?old_id=307995 最近,我从孙子(指<孙子兵法>——译者注)那里学到了一些策略:速度和准备 “兵之情主速,乘人之不及 ...