<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. AutoIt脚本在做自动化操作的时候,如何进行错误捕获?

    我的自动化脚本在运行的时候,会生成一个界面,点击该页面上的按钮能够进行自动化操作. 经常遇到的一个问题是: 脚本运行一半,GUI程序出现了异常情况,这个时候,再次点击生成的界面上的按钮,不会有任何反应 ...

  2. java中为什么inputstreamreader和buffered reader要配合着用

    因为InputStreamReader是字节输出(汉字会被分为两个字节),而BufferedReader是它的“包装”(整行读取),效率更高,所以配合使用更好.可以通过BufferedReader 流 ...

  3. class.forName()和.class有什么区别?

    class.forName()会初始化类的成员(静态的),最先加载的是类的静态成员变量,然后是静态代码块. 访问常量并不会导致类的初始化,但是访问静态成员会.

  4. (二十八)分类信息的curd-分类信息删除

    删除分类步骤分析: 1.在list.jsp上编写 删除连接 /store/adminCategory?method=delete&cid=?? 2.在delete方法中 获取cid 调用ser ...

  5. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时10

    课时10 神经网络训练细节part1(上) 没有大量的数据也不会有太多影响,只需要找一个经过预训练的卷积神经网络然后进行调整 从数据集中抽样一小批数据, 将数据运入卷积神经网络中来计算损失值 通过反向 ...

  6. 所读STL文章摘要集结

    在网上看了一些STL相关文章,这里将它们的摘要进行集结,方便以后查找. 1.黄常标,林俊义,江开勇.快速成形中STL文件拓扑信息的快速建立.2004 摘要:在分析现有建立拓扑信息方法的基础上,提出基于 ...

  7. 批处理(cmd)的学习记录

    批处理的使基本使用 Command Introduction Example set 设置环境变量 set name="小明" call 启动应用程序   rem 解释说明,可通过 ...

  8. input required字段;django input输入框不填写会自动变红如何修改

    前端页面中,input不输入任何内容时,点击submit时,未填写的input会标红框,有些人还会有"该字段必填的字样"!! 什么鬼,你妹的,js也见不到,css3动画也见不到,怎 ...

  9. CoreBluetooth Central模式 Swift版

    也是醉了,CB这个API到现在也没有Swift的文档.最新的文档还是3年前还是4年前的OC版的,被雷的外焦里嫩的.自己一点一点写成Swift还各种报错,最坑的是这些错误压根找不到解决方案.索性自己做个 ...

  10. POJ1458【最长公共子序列】

    基础DP. #include <iostream> #include <stdio.h> #include <string.h> #include <stac ...