首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS 导航,告别“回到顶部”

本文主要内容 1、导航是什么 2、导航的实现方法 3、小结 1、条导航是什么 如图: 导航栏的初始位置一般是靠近在页面的顶部位置,但是又存在一定距离,通常这块区域放置最为醒目或者重要元素的地方...当页面向下滚动时超过了导航的初始位置时,需要把导航栏固定在窗口顶部,一般导航栏还可以替换成文章标题栏,搜索框、tab条等等,例如百度糯米,天猫,淘宝最为常用。...明白了导航条的基本效果,下面写个简单的demo吧。 2、导航的实现方法 一、样式结构搭建 考虑到触发功能,需要为导航条设置触发后的样式。 HTML5学堂是一个热爱H5的讲师组成的组织,致力于构建一个前端、HTML5的分享平台,能够给学生提供一些资料,也为广大前端爱好者提供一个分享平台,其中涉及到的基本知识,JS...底层知识,JS底层知识,面试真题、相关技术、未来发展等。

7.6K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    页面中元素的

    [需求] 滚动页面到顶部,实现某元素固定到顶部效果 点击某个按钮,页面滚动到相应的位置 滚动页面,当到达某个位置时,高亮对应的相关按钮 [元素实现方式] 关于元素顶效果,通过查阅相关资料和相关测试...形成依次占位的效果 具体实现效果如下: .sticky-box{ position: sticky; position: -webkit-sticky; top: 60px; //可通过js...this.isFixed = scrollTop > offsetTop; } } [三、使用getBoundingClientRect().top] 还有一种更为直接的方式,可以实现顶效果...,就是使用getBoundingClientRect().top来获取元素相对于视口(浏览器窗口)的位置,相对于offsetTop,该方法不用考虑到元素的父级元素和页面滚动条的高度,直接对该元素进行处理即可...{ /** * getBoundingClientRect().top 获取某元素距离浏览器顶部的高度,不包含滚动的距离 this.offsetTop 表示的是元素距离顶部的条件值

    1.2K30

    基于 Vue 的两层踩坑总结

    图片.gif 功能点:两层,因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层的位置,这个功能点和锚点有些类似。...-- sticky wrapper, IMPORTANT --> CONTENT 看了 VueSticky 的源码后将该插件的实现原理简要概括如下:...主要原因:第一层还符合条件,第二层已经开始消失 解决方案:给第一层元素添加 minHeight 属性,其大小为第一层元素的高度与第二层元素的高度的和。...position 值为 static 即可 ◎ “变形” 同样 DOM 结构的元素,在 IE 浏览器中,会变形 查看 vue-sticky 的源码,发现 position:fixed; 是设置在要的元素的第一个子元素上...这样子对于页面加载性能上会有很大的提升,也提高了用户体验,关于图片优化方面内容可以阅读我们团队另一篇文章 为你重新系统梳理下, Web 体验优化中和图有关的那些事(万字长文) 总结 本文简单的介绍了 VueSticky 插件的实现原理并分享了实战过程中出现的问题以及解决方案

    1.5K20

    【前端词典】4 种滚动实现方式的比较

    我当时很纳闷为何一个滚动会有 bug,后来我查看代码才发现直接用的是 offsetTop 这个属性,而且并没有做兼容性处理。...后来在项目中总会遇到滚动的效果需要实现,现在我将我知道的 4 种滚动实现方式做详细介绍。...我们一定需要使用 scrollTop-offsetTop 的值来实现滚动的效果吗?答案是否定的。 我们一同看看第四种方案。...遇到的两个问题 一、的那一刻伴随抖动 出现抖动的原因是因为:在元素 position 变为 fixed 的时候,该元素就脱离了文档流,下一个元素就进行了补位。就是这个补位操作造成了抖动。...描述: 当页面往下滚动时,元素需要等页面滚动停止之后才会出现顶效果 当页面往上滚动时,滚动到元素恢复文档流位置时元素不恢复原样,而等页面停止滚动之后才会恢复原样 原因:在 ios 系统上不能实时监听

    2.5K60

    基于 Vue 的两层踩坑总结

    图片.gif 功能点:两层,因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层的位置,这个功能点和锚点有些类似。...-- sticky wrapper, IMPORTANT --> CONTENT 看了 VueSticky 的源码后将该插件的实现原理简要概括如下:...主要原因:第一层还符合条件,第二层已经开始消失 解决方案:给第一层元素添加 minHeight 属性,其大小为第一层元素的高度与第二层元素的高度的和。...position 值为 static 即可 ◎ “变形” 同样 DOM 结构的元素,在 IE 浏览器中,会变形 查看 vue-sticky 的源码,发现 position:fixed; 是设置在要的元素的第一个子元素上...这样子对于页面加载性能上会有很大的提升,也提高了用户体验,关于图片优化方面内容可以阅读我们团队另一篇文章 为你重新系统梳理下, Web 体验优化中和图有关的那些事(万字长文) 总结 本文简单的介绍了 VueSticky 插件的实现原理并分享了实战过程中出现的问题以及解决方案

    76310

    自定义tab顶效果一(原理

    PS:问题:什么是有什么作用,怎么使用?...在很多app商城中,介绍软件的时候就会使用顶效果, 有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模块,不需要再滑到顶部,有时我们在查看一个软件的简介的时候上拉布局...该怎么用呢,这里有一个简单的实现方法,在这期间有一个问题,是说ScrollViewd的滑动监听不能检测布局距离的问题,我查了写资料,说是在6.0之前的sdk不支持,但是可以自己重写方法。...实现原理:创建两个布局,这两个布局处于重叠状态,一个布局上面显示   背景为蓝色+导航栏+数据内容,注意这里的导航栏随着布局可移动,第二个布局显示导航栏但处于影藏状态,当滑动屏幕时,蓝色部分全部被拉上去后

    2.2K130

    【前端词典】4 (+1)种滚动实现方式的比较

    后来在项目中总会遇到滚动的效果需要实现,现在我将我知道的 4 种滚动实现方式做详细介绍。...遇到的两个问题 一、的那一刻伴随抖动 出现抖动的原因是因为:在元素 position 变为 fixed 的时候,该元素就脱离了文档流,下一个元素就进行了补位。就是这个补位操作造成了抖动。...描述: 当页面往下滚动时,元素需要等页面滚动停止之后才会出现顶效果 当页面往上滚动时,滚动到元素恢复文档流位置时元素不恢复原样,而等页面停止滚动之后才会恢复原样 原因:在 ios 系统上不能实时监听...有的朋友或许会说这个我知道,可是这和滚动有什么关系呢? 不急,你是否还记得滚动使用了 offsetTop 或者 getBoundingClientRect().top 来获取响应的偏移量呢?...这样可以控制在一定时间内只读取 这里节流函数就直接是用 lodash.js 封装好的 throttle 方法。

    2.1K30

    导航栏滚动并自动高亮和点击跳转锚点

    2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果,就是api导航栏当滚动条滚动到其所在位置时,自动,当滚动到下方所在导航栏指定的介绍时,自动高亮其导航栏。...我这次采用的是react来写,具体思路都是相同的,无论你用的是vue还是angular 还是使用jq还是原生js,都是一样的。...setNavList] = useState(navInfo);//这里使用自行构建的导航栏 const [fixNav,setFixNav] = useState(false);//用户标识什么时候导航栏...,另外增加了一个class为zhanfIx的地址,因为当导航栏时,此处会因为空出位置,下面内容上移,而产生不和谐的效果,我们需要在其的同时增加一个div来占位,以增加平滑的效果。...下面我们来看一下导航栏和滑动到指定位置导航栏高亮的逻辑。

    10.5K50

    顶效果解决方案

    一.场景 “”是一种比较老的交互方式,在PC页面已经用了很多年了,如图: sticky 元素的初始位置一般靠近页面顶部,但与顶部有一定距离,这块区域放的是最醒目的元素,比如Banner图...页面向下滚动超过元素初始位置时,把元素固定在顶部 要求的元素一般是二级导航栏、搜索框、文章标题栏(h1)、表头(thead)、tab条等等,共同特点是在内容或功能上比较重要,但又不是最重要的元素...所以需要配合默认图片占位符(base64)使用,或者偷懒先用min-height顶着,上方图片onload时再修正stickyT 三.移动端解决方案 从原理上看,直接搬过来是可以的。...,比Android scroll方案体验更平滑,但限制很明显,无法实时获知状态,于此相关的各种效果都受限制,比如tab列表: sticky-tab 非状态时可以划动列表部分,让页面滚动,转到状态...,多个tab列表无缝切换,浏览状态互不影响 状态时划动当前tab列表,到头,让页面滚动,转到非状态 也就是说,非状态时,让tab列表不能滚动(overflow-y: hidden);状态时

    3.5K10
    领券