<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悬浮吸顶的更多相关文章

  1. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

  2. 原生js实现吸顶导航和回到顶部特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js之吸顶效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Android笔记之ExpandableListView（悬浮吸顶Demo）

    参考链接 ExpandableListView中item的定位问题 - RELY_ON_YOURSELF的博客 - CSDN博客(感觉写得很好,讲到了组位置.子位置及原始位置之间的转换) how to ...

  5. react 吸顶实现

    今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...

  6. 5行js代码搞定导航吸顶效果

    一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...

  7. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  8. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

随机推荐

  1. Eclipse中修改GIT分支名称

    修改GIT分支名称: 1.切换到要修改名称的分支: 2.右击项目——Team——Advanced——Rename Branch…: 3.在弹出的Branch Rename框中选中要修改名的分支——Re ...

  2. 在HTTP页面输入数据，Chrome 70将显示红色不安全警告

    2018年10月17日,Chrome 70版本正式发布,该版本更新多项安全功能,再次升级对HTTP页面的不安全警告样式.当用户在HTTP页面输入数据时,Chrome 70将显示醒目的红色不安全警告,让 ...

  3. SQL中Group By的使用(转)

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...

  4. Element源码阅读(1)

    一.目的 阅读element源码旨在了解其代码的组织架构模式, 代码编写的方式, 以及组件化的一些思路, 对照自己, 从而进步. 二. 源码阅读所得 1.在element源码中的mixins目录之下, ...

  5. bzoj 1814 Fornula 1

    Formula 1 题意 在\(n*m\)的矩阵中,有些格子有树,没有树的格子不能到达,找一条回路,吃完所有的树,求有多少种方法. 解法 因为只要一条回路,所以我们必须维护插头的连通性. 具体的可以参 ...

  6. SPOJ CIRU

    SPOJ CIRU 题意 给出n个圆,求他们覆盖的面积. 解法 自适应Simpson,但需要将圆离散化一下,以保证我们查询的是一个连续的有圆的区间. 奇怪的是我没有离散化,样例都没有过,却把题给A了 ...

  7. 修改Myeclies作者用户名

    首先点击 windos 点击 preferences 依次点击左侧 Java -> Code Style -> Code Templates 击右侧Comments,将其中的Types项, ...

  8. STM32 USB转串口驱动安装不成功出现黄色感叹号解决方法！

    相信很多人在做USB转串口时出现过串口驱动安装不成功,出现黄色感叹号问题, 出现这种问题一般是驱动安装不成功造成的. 这里我就这个问题总结几个简单的方法. 方法1: 插上USB,利用驱动人生安装驱动. ...

  9. dubbo Failed to check the status of the service com.user.service.UserService. No provider available for the service

    Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'u ...

  10. java中Collection 与Collections的区别

    1. Collection是集合类的一个顶级接口,其直接继承接口有List与Set 而Collections则是集合类的一个工具类/帮助类,其中提供了一系列静态方法,用于对集合中元素进行排序.搜索以及 ...