js悬浮吸顶
<head>
<meta charset="UTF-8">
<title>吸顶和锚点链接</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.perent {
background: #ccc;
width: 100%;
}
p {
text-align: center;
}
.header {
width: 1200px;
margin: 0 auto;
height: 60px;
background: greenyellow;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
margin: 0 auto;
text-align: center;
z-index: 10;
background: #fff;
box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.3);
}
.tab {
margin: 20px auto;
height: 60px;
overflow: hidden;
}
.tab li {
width: 33%;
float: left;
border: 1px solid #007AFF;
text-align: center;
padding: 10px 0;
border-radius: 10px;
cursor: pointer;
}
.child{
width: 600px;
height: 100px;
background: palegoldenrod;
margin: 200px auto;
border-radius: 10px;
}
</style>
<body>
<div class="perent">
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<div class="header">哈哈哈哈，猜我是谁啊</div>
<ul class="tab" id="tab">
<li class="item">11111</li>
<li class="item">22222</li>
<li class="item">33333</li>
</ul>
<div class="child">1111111111111</div>
<div class="child">2222222222222</div>
<div class="child">3333333333333</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">
</script>
<script>
window.addEventListener("scroll", this.handleScroll);
function handleScroll() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var tabOffsettop=document.getElementById('tab').offsetTop
if(scrollTop >= 278) {
$('.header').addClass("fixed")
$('.tab').addClass("fixed")
} else {
$('.header').removeClass("fixed")
$('.tab').removeClass("fixed")
}
}
</script>
js悬浮吸顶的更多相关文章
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- 原生js实现吸顶导航和回到顶部特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js之吸顶效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android笔记之ExpandableListView（悬浮吸顶Demo）
参考链接 ExpandableListView中item的定位问题 - RELY_ON_YOURSELF的博客 - CSDN博客(感觉写得很好,讲到了组位置.子位置及原始位置之间的转换) how to ...
- react 吸顶实现
今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...
- 5行js代码搞定导航吸顶效果
一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 原生js实现导航栏吸顶
实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...
随机推荐
- [原创]c语言中const与指针的用法
最近一直在准备笔试,补补大一大二欠下的课.复习c语言时碰见这么个题: 1 2 3 4 5 int a=248, b=4; int const c=21; const int *d=&a; ...
- javaScript注释 to 颜文字
将javascript 注释(alert.console)转化为 颜文字语言. http://utf-8.jp/public/aaencode.html
- java 文件下载遇到的数个坑
文件的下载在web开发中应该是很常用的功能,近期项目中遇到的一个需求是:前端提供 查询条件以及查询结果的字段,后端拿到这些参数之后,在数据库中根据业务逻辑查询得出查询结果,导出成excel文件,同时传 ...
- CF949A Zebras 构造
是一道不错的构造题. 我们观察,一个 111 的前后必须都有 000. 那么,我们开一个二维数组 (vector)(vector)(vector),这样每遇到一个 000 就将 000 加入到当前的 ...
- oracle中单引号的处理
当想让输出的结果中字段带有单引号', 场景一:连续三个单引号''' select '''helin''' from dual; ---'helin' 场景二:拼接字段的结果集--连续4个单引号 sel ...
- cmake模板
1.主要命令 project (TEST):指定项目名称为TEST aux_source_directory(<dir> <variable>):将当前目录中的源文件名称赋值给 ...
- 【codeforces 743E】Vladik and cards
[题目链接]:http://codeforces.com/problemset/problem/743/E [题意] 给你n个数字; 这些数字都是1到8范围内的整数; 然后让你从中选出一个最长的子列; ...
- C/C++ 名正则言顺
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50532701 名称所表达的含义极其丰富 ...
- 分库代价高的情况下，如何优化ES解决亿级数据量检索
数据平台已迭代三个版本,从一开始遇到很多常见的难题,到现在终于有片段时间整理一些已完善的文档,在此分享以供所需朋友的实现参考,但愿能帮助大家少走些弯路,在此篇幅中偏重于ElasticSearch的优化 ...
- nyoj 1189 yougth和他的朋友们 (DP)
题目:pid=1189" target="_blank">nyoj 1189 yougth和他的朋友们 这题目是14年北京赛区的原题.讲题的时候说有三种解法,我们是 ...