html怎么置顶导航栏,css怎么实现滚动页面导航栏固定在顶部

css怎么实现滚动页面导航栏固定在顶部(吸顶效果)

功能：当网页向下滚动时，导航栏一直在固定在顶部

一、css设置

这里主要用到css中position中的relative与fixed；

其中relative是生成相对定位的元素，相对于其正常位置进行定位。

fixed是生成绝对定位的元素，相对于浏览器窗口进行定位。

思路就是当导航栏滚动到 top: 0 时，把相对定位改成绝对定位，这样就相对于浏览器窗口进行定位，并且设置一个值，这样导航栏就会固定在某个地方

代码如下：

.box{

position: relative;

height: 80px;

width: 100%;

z-index: 999;

}

.box-active{

position: fixed;

top: 0;

}

二：js设置

这里用的是jquery进行监听，代码如下：

// 监听事件

window.addEventListener('scroll', function(){

let t = $('body, html').scrollTop(); // 目前监听的是整个body的滚动条距离

if(t>0){

$('.box').addClass('box-active')

}else{

$('.box').removeClass('box-active')

}

})

html怎么置顶导航栏,css怎么实现滚动页面导航栏固定在顶部相关推荐

微信小程序页面双栏布局教程小程序页面双栏布局
一.小程序双栏组件说明: 用来整体的布局,相当于一个一分为二的板块,它分为两部分,操作的时候显示一个分隔的标志,便于操作,预览则不会出现.双栏默认每个栏占50%,当然,百分比是可以调整的. 双栏里面可 ...
用html做qq会员页面导航,练习1：QQ会员页面导航.html
练习1:QQ会员页面导航 *{ margin: 0px; padding: 0px; } body a:link{ color: white; text-decoration: none; } bod ...
html5 箭头形状导航条,css实现带箭头的导航条
要实现这种导航条,首先要知道箭头是怎么做出来. http://www.cnblogs.com/daxiong/articles/3158630.html 这里说了用css做箭头的原理和实现. ...
向下滚动页面导航悬浮
为什么80%的码农都做不了架构师?>>> 做两个导航,第二个隐藏下拉到一定位置,显示第二个,position:fixed $(function(){$(window).scr ...
html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果
今天做了个固定定位的效果.比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示.当滚动到导航下面,导航就固定到顶部. 一.css部分: fixed 生成绝对定位的元素,相对于浏览器窗口进 ...
微信支持群消息置顶；博通洽购虚拟机巨头VMware；
微信支持群消息置顶近日,微信iOS版更新了8.0.22版本,有用户发现,在该版本中,#微信新增群消息置顶功能#.群主或管理员长按需要置顶的消息,在菜单中点击置顶操作.之后消息就会置于群聊天界面的顶部 ...
页面导航【WP7学习札记之七】
本节是WP7学习札记的第七篇,讲述的内容摘要主要是将页面导航的两种方式.地址别名.页面之间的数据传递(包括传递字符串.和传递对象两种方式).回退按钮(重写Back键的事件),具体如下: 首先讲述下Wi ...
计算机页面的滚动栏怎么拉长,长滚动网页页面设计技巧
长滚动网页页面设计技巧长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,下面是小编分享的长滚动网页页面设计技巧,一起来看一下吧. 长滚动式的页面有着如下 ...
WindowsPhone 7 页面导航和虚拟路径、导航传值
一.Phone 7的导航方式分为Xaml页面导航和后台代码导航. 1.Xaml页面导航: 注意NavigateUri是控件属性,故没有此属性的控件只能通过后台代码导航.如:Button控件. 2.后台 ...
【微信小程序】页面导航
目录小程序 - 视图与逻辑页面导航 1. 什么是页面导航 2. 小程序中实现页面导航的两种方式页面导航 - 声明式导航 1. 导航到 tabBar 页面 2. 导航到非 tabBar 页面 3. ...

html怎么置顶导航栏,css怎么实现滚动页面导航栏固定在顶部

html怎么置顶导航栏,css怎么实现滚动页面导航栏固定在顶部相关推荐

最新文章

热门文章