吸顶条 ---- jQ写法
<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写法的更多相关文章
- 原生js实现吸顶导航和回到顶部特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- better-scroll之吸顶效果巨坑挣扎中
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一
如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的 ...
- status bar、navigationBar、tableView吸顶view设置
1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)view ...
- collectionview cell吸顶效果
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Hiragino Sans GB"; color: #cf8724 } ...
- ECSTORE导航吸顶功能
ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...
- React制作吸顶功能总结
总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下, 主页面代码如下: class Head e ...
随机推荐
- HTML <legend> 标签
转自:https://www.w3cschool.cn/htmltags/tag-legend.html <!DOCTYPE HTML> <html> <body> ...
- File System Programming---(三)
Accessing Files and Directories Before you can open a file, you first have to locate it in the file ...
- k8s关键性概念
1.service每个service对应一个cluster IP,cluster IP对应的服务网段最初是在配置kube-apiserver.kube-controller-manager和kube- ...
- 040--JavaScript
一.JavaScript的两种引入方式 {#1 直接编写#} <script> alert('hello Galileo') </script> {#2 导入文件#} < ...
- HDU 5101
hdoj5101 lower_bound函数: 题意: 从两个不同集合拿出两个数,加的和大于k的可行的方案数 思路: 答案=从所有数中选择的两个加和大于k的数的方案数-在同一个集合中选择的两个加和大于 ...
- IT兄弟连 Java Web教程 经典案例2
案例需求:写一个用户登录的html页面有账号和密码,并在登录的Servlet中获取登录的账号和密码,如果账号是abc密码是123则向浏览器输出登录成功,否则向浏览器输出登录失败. 案例实现: ● h ...
- NOIp2002神经网络 【拓扑排序】By cellur925
题目传送门 这道题目没有什么难的,是一道拓扑排序+递推的题目.我的思路是开始处理出拓扑序,然后因为数据范围很小怎么搞都可以,就邻接矩阵存图+暴力枚举.结果60分. 后来看题解发现,大家都是边拓扑边进行 ...
- MySql | 常用操作总结
创建数据库: CREATE DATABASE 数据库名; 删除数据库名: drop database <数据库名>; 选择数据库: use 数据库名; 创建数据表: CREATE TABL ...
- nginx memcache缓存
1 基本 在一个lnmp架构中,nginx遇到动态资源,会反向代理,把请求发送到后端的php-fpm服务,php-fpm从mysql里读取数据,生产网页,然后返回给client. 如果流量大,php- ...
- RHEL7.2安装及配置实验环境
截图太多了,就不一一上传了,请查看这个分享网址 http://pan.baidu.com/s/1kVeYANH 什么时候博客更新下能直接把图一下复制进来多好!省事.