<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. ZBrush中Magnify膨胀笔刷介绍

    Magnify膨胀笔刷是ZBrush®笔刷中经常使用的,利用该笔刷可绘制中心向四周膨胀的效果.本文内容向大家介绍ZBrush®中膨胀笔刷以便大家熟悉它的用法和特性. Magnify膨胀笔刷 Magni ...

  2. ZBrush软件特性之Edit

    ZBrush®中的Edit调控板控制撤销和重做命令,它有一或两个命令设置将根据Tool工具调控板当前选择的工具而定,默认配置的命令仅有文档编辑,不过当激活一个3D工具,只针对这个工具的两个按钮设置变成 ...

  3. JS对以对象组成的数组去重

    这是从https://segmentfault.com/q/1010000006954351参考的,达到了我要去重的功能!!! var hash = {};//arr是要去重的对象数组 arr = a ...

  4. nysql数据库优化

    硬件优化 软件优化 my.cnf参数优化,命令监控show global status\G 调优工具mysqlreport sql语句优化 索引的优化 白名单机制--百度,就是让一些不规范的语句执行查 ...

  5. 单元测试Struts2Spring项目的Action和Service（包含源码）

    最近,认真实践了单元测试Struts2.Spring等Java项目,今天特意写的是单元测试Struts2Spring项目的Action和Service. 由于已经写过不少Web开发框架单元测试的代码, ...

  6. ucore_lab0

    一直想好好学习一下操作系统课程,去一个Mooc网站上找了一门操作系统的课程.这便是里面的配套实验. 实验指导:点这里 lab0主要是准备相关的操作环境.课程推荐使用qemu作为硬件模拟器,推荐运行环境 ...

  7. 【Codeforces Round #499 (Div. 1) B】Rocket

    [链接] 我是链接,点我呀:) [题意] 让你猜到火星的距离x是多少. 已知1<=x<=m 然后你可以问系统最多60个问题 问题的形式以一个整数y表示 然后系统会回答你3种结果 -1 x& ...

  8. tomcat使用及原理

    1,Tomcat作为Servlet容器的基本功能 2,Tomcat的组成结构 Tomcat本身由一列的可配置的组件构成,其中核心组件是Servlet容器组件,它是所有其他Tomcat组件的顶层容器.T ...

  9. [Google Guava] 2.2-新集合类型

    转自:并发编程网 原文链接:http://ifeve.com/google-guava-newcollectiontypes/ 链接博客其他文章中还有更多的guava其他功能的描述,有空可慢慢看. G ...

  10. leetCode(24):Binary Search Tree Iterator

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...