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 ( ...
随机推荐
- Maven配置，使用IntelliJ IDEA和Maven创建Java Web项目
1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配置本地仓库路径 3.配置maven环境变量 4 ...
- ajax返回值
前端: <html> <head> <meta name="viewport" content="width=device-width&qu ...
- QA小课堂：一个网站或者APP开发要多少钱
经常遇到朋友问我:“开发一个京东商城需要多少钱?开发一个滴滴打车需要多少钱?”类似这样的需求,就连我这样一名伪开发者都不愿意去骗客户或者朋友,因为这种问题是很难回答出来的.为什么这么说呢?要知道类似京 ...
- XP访问WIN10共享打印机提示错误：操作无法完成,拒绝访问
XP系统添加打印机--连接到此计算机的本地打印机(取消自动检测)--创建新端口(LOCAL port)----输入端口名\\计算机名\打印机名.(例如:\\adubei\\HP lasjet 1020 ...
- day06-1 与用户交互以及格式化输出
目录 Python的与用户交互 Python2的input和raw_input(了解) 格式化输出 占位符 format函数格式化字符串 f-string格式化(方便) Python的与用户交互 in ...
- SQL中Group By的使用(转)
1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...
- Vue文件封装日历组件
封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...
- 【RHEL7/CentOS7防火墙之firewall-cmd命令详解】
目录 Firewalld zone firewall-cmd 开始配置防火墙策略 总结 Redhat Enterprise Linux7已默认使用firewalld防火墙,其管理工具是firewall ...
- Swoole 源码分析——进程管理 Swoole_Process
前言 swoole-1.7.2 增加了一个进程管理模块,用来替代 PHP 的 pcntl 扩展. PHP自带的pcntl,存在很多不足,如 pcntl 没有提供进程间通信的功能 pcntl 不支持重定 ...
- 炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行.随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕. 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容. 但是,如 ...