<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. 关于函数调用约定-thiscall调用约定

    函数调用约定描述了如何以正确的方式调用某些特定类型的函数.包括了函数参数在栈上的分配顺序.有哪些参数将通过寄存器传入,以及在函数返回时函数栈的回收方式等. 函数调用约定的几种类型 stdcall,cd ...

  2. VS运行程序发生栈溢出的分析

    这两天时间都浪费在解决各种栈溢出了,没想到最后各个部件合在一起的时候会出现这么多的问题,这其实是我第一次解决栈溢出问题,很认真的查了查资料,找了几种解决方法,但是作用都不大,拆了东墙补西墙,虽然知道及 ...

  3. win10下CorelDRAW菜单栏字体变成白色了怎么办？

    相信很多同学安装了win10系统之后,你的 CDR 菜单栏就变了,变得没有任何内容,以白色显示,win10系统与CorelDRAW早期的版本兼容方面存在问题,(CorelDRAW x7/X8无此问题出 ...

  4. GDB Layout

    layout:用于分割窗口,可以一边查看代码,一边测试.主要有以下几种用法:layout src:显示源代码窗口layout asm:显示汇编窗口layout regs:显示源代码/汇编和寄存器窗口l ...

  5. luogu P4245 【模板】任意模数NTT MTT

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  6. PAT 天梯赛练习集 L2-016. 愿天下有情人都是失散多年的兄妹

    题目链接:https://www.patest.cn/contests/gplt/L2-016 呵呵.大家都知道五服以内不得通婚,即两个人最近的共同祖先如果在五代以内(即本人.父母.祖父母.曾祖父母. ...

  7. php数组 匹配键值

    1.array_search() //判断键值是否在数组中,//存在,返回值对应的键;//不存在,返回false;//例子:$type = array( "选考" => 'o ...

  8. Windows Vista 安装和使用指导 - 停止支持后的几条建议

    简介 曾经被广大网民吐槽的Windows Vista现在已经淡出了人们的视线,但仍有一些朋友想要体验一下这个操作系统.Windows Vista是Windows发展路线上的里程碑,相比之前的Windo ...

  9. BZOJ 4182 Shopping (点分治+树上多重背包)

    题目大意:给你一颗树,你有$m$元钱,每个节点都有一种物品,价值为$w$,代价为$c$,有$d$个,如果在$u$和$v$两个城市都购买了至少一个物品,那么$u,v$路径上每个节点也都必须买至少一个物品 ...

  10. Qt编程—去掉标题栏和设置窗口透明用法

    学习Qt编程,有时候我们很想做出好看又比较炫的画面,这时就常用到qt上的一些技巧. 这里我以一个小例子来展示qt的这些技巧,此qt编程写的,如图:(去掉标题栏和设置窗口透明后) 代码实现部分: .h文 ...