吸顶导航 |学习笔记

简介: 快速学习 吸顶导航

开发者学堂课程【移动 Web 前端开发:吸顶导航 】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8477


吸顶导航

 

目录

一、具体内容

二、应用


一、 具体内容

在页面滚动时需要吸附式导航。代码为

属性含义

data-spy声明是一个吸顶组件

data-offset-top="60" 表示滚动距离顶部 60px 时显示导航条

data-offset-bottom="200 表示滚动距离底部 60px 时显示导航条

一般来讲,只用 data-offset-top 即可。

 

二、应用

在导航栏中增加 data-spy=”affix声明是一个affix组件。<nav class=”navbar” wjs_nav data_spy=”affix”>

刷新发现导航消失了,是因为层级原因,若要使元素固定,要把定位变为 fixed 的固定定位。

当滑动到轮播图处发现导航消失,是因为轮播图的层级更高,可以增加它的层级使其在轮播图处也能显示:

.wjs_nav{

z-index:99999

}

无论是绝对定位还是固定定位,设置定位的方式之后,容器的宽度由内容决定。内容由 content 决定 ,content 为1170px,整个的 div 宽度也为1170px。

吸附导航固定在顶部通栏下面原因是只设置了 fixed ,但是没有确定坐标。没有设置 left 和 top ,0,它默认基于原来的位置作定位。如果需要导航浮动上去,要设置 left 和 top ,要设置和浏览器一样宽,需要单独给它设置宽度。

.wjs_nav{

z-index:99999;

width:100%;

top:0;

left:0

导航栏把 topbar 遮住,并且已经是浮动状态,原因是没有设置 data-offset-top,不设置则默认为0,当页面滚动距离为0时就有了这个效果。

应该书写为:

<nav class=”navbar” wjs_nav data_spy=”affix” "data-offset-top="1">

此时需要滚动页面,距离顶部有1个像素就会产生吸顶效果,如果设置为,则距离顶部200时才会显示吸顶导航。

目录
打赏
0
0
0
0
127
分享
相关文章
使用 u-navbar 组件实现页面导航和布局的完全指南
使用 u-navbar 组件实现页面导航和布局的完全指南
1682 0
|
7月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
146 1
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
1012 0
ue仿携程轮播图效果(滑动轮播,下方高度自适应)
这篇文章主要介绍了vue仿携程轮播图效果(滑动轮播,下方高度自适应),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
html+css实战98-新浪导航布局div
html+css实战98-新浪导航布局div
126 0
html+css实战98-新浪导航布局div
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(一)
371 0
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
171 0
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
Bootstrap教程(20)--选项卡式导航、胶囊式导航、面包屑导航
本文目录 1. 概述 2. 选项卡式导航 2.1 普通选项卡导航 2.2 等宽选项卡导航 3. 胶囊式导航 3.1 普通胶囊式导航 3.2 垂直胶囊式导航 4. 面包屑导航 5. 小结
736 0
Bootstrap教程(20)--选项卡式导航、胶囊式导航、面包屑导航

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等