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 ( ...
随机推荐
- java 读写分离
源码地址:http://git.oschina.net/xiaochangwei 先回答下 1.为啥要读写分离? 大家都知道最初开始,一个项目对应一个数据库,基本是一对一的,但是由于后来用户及数据还有 ...
- CF960F Pathwalks_权值线段树_LIS
很不错的一道思维题. Code: #include<cstdio> #include<algorithm> #include<iostream> using nam ...
- vue 删除某个元素和删除某些元素
今天做项目使用前端vue框架,需要循环遍历去删除一些数组元素.开始思想局限,一直纠结如何去循环删除,犹豫循环删除数组值下标会发生变化,并不是一种好的方法. 方法一:使用forEach 和 splice ...
- js实现鼠标吸附线条效果
如图,箭头→为鼠标位置,鼠标会带有吸附着一些线条的效果,具体效果可在我的博客查看,当然,这也是可很受欢迎很常见的效果了=3= <script> !function(){ function ...
- Nutch2 WebPage 字段解释
Nutch2 WebPage 字段解释 Nutch2.2.1 id
- PatentTips - Safe general purpose virtual machine computing system
BACKGROUND OF THE INVENTION The present invention relates to virtual machine implementations, and in ...
- SharePoint 2010 安装教程
SharePoint Server 2010作为MOSS 2007的升级版本,自从2009年底发布Beta版本以来就备受关注,网络上已经出现了很多相关的文章,其中也不乏中文的信息. 最近SharePo ...
- n个骰子，和为x的概率分别是多少
开始我居然又没有想出来.. 还是看了解法.开始的时候,一直想的是用概率,百分比来求,后来才发现,用次数来求,最后除一下,更近清晰. 方法,可以是递归,每次多一个骰子的时候,次数分别加上个数以及上一次i ...
- poj2965 The Pilots Brothers' refrigerator（直接计算或枚举Enum+dfs）
转载请注明出处:http://blog.csdn.net/u012860063? viewmode=contents 题目链接:http://poj.org/problem? id=2965 ---- ...
- uva725_一道水题（优化到了29ms）
//////////////////////////////////////////////////////////////////////////////////////////////////// ...