html tab顶部吸附,仿京东内容上下滚动,吸顶tab紧跟着切换

最新推荐文章于 2023-11-21 16:31:19 发布
最新推荐文章于 2023-11-21 16:31:19 发布
阅读量855 收藏 1
点赞数
文章标签： html tab顶部吸附
本文介绍如何创建一个HTML内容滚动时，顶部tab随之切换并吸附的效果。通过示例代码展示实现方法，包括HTML、CSS和JavaScript部分，以及如何处理滚动事件和点击事件来达到平滑滚动和tab高亮的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近工作中一个劲儿的出现了这种内容上下滚动,吸顶tab紧跟着切换的效果，并且点击tab会滚动到具体的位置类似锚点，所以我就写了一个记录下来，我们先看下效果图，大概就是这个样子，下面我们开始撸代码

dbe3eb3ebd99

上下滚动内容吸顶tab切换效果图

html部分

  • tab1
  • tab2
  • tab3
  • tab4
  • tab5
content1
content2
content3
content4
content5

css部分

如果点击tab页面滚到具体的内容位置的时候想让页面有一种滚动效果，最简单的方法就是给html,body加一个样式 scroll-behavior:smooth; 如果不需要的话就可以去掉

*{

margin:0;

padding:0;

list-style

最低0.47元/天 解锁文章
陈华坤
关注
Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动
leafseelight的专栏
08-26 631
运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息，即节点距离页面顶部的距离，再通过uniapp原生监听页面滚动事件onPageScroll，获取页面内容滚动的高度，二者相加即定位到对应节点的滚动距离。Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动。欢迎关注我的公众号，打开右下角小程序，万部短剧搜索。微信搜索【蜜蜂网盘搜so】小程序，万部短剧搜索。微信搜索【蜜蜂网盘搜so】小程序，万部短剧搜索。1.页面template结构。
Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置
最新发布
weixin_47342624的博客
06-13 1530
data() {return {curTab: 0,tabTop: 0, // tab距离顶部的距离},name: '正文详情',}]name: '相关附件',})name: '图文解读',})},// 点击tab滚动事件if(!0 : (data?},// uni页面滚动监听事件// 获取tabs的距离顶部的距离}).exec();},
html tab顶部吸附,浅谈react.js中实现tab吸顶效果的问题
weixin_33682804的博客
06-17 453
在react项目开发中有一个需求是，页面滚动到tab所在位置时，tab要固定在顶部。实现的思路其实很简单，就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时，将tab的position变为fixed。在react中，我在state中设置一个navTop属性，切换这个属性的值为true或者false，然后tab标签使用classnames()这个方法来利用navTop...
Android 嵌套滚动NestedScrollView+TabLayout+ViewPager+Fragment+RecyclerView 实现京东、美团首页效果Tab页滚动到顶部时自动吸附
安卓开发-顺 的博客
02-06 4731
Android 嵌套滚动NestedScrollView+TabLayout+ViewPager+Fragment+RecyclerView 实现京东、美团首页效果Tab页滚动到顶部时自动吸附
html tab顶部吸附,移动端滚动页面 header吸附顶部/固定顶部
weixin_34664632的博客
06-17 588
实现思路实际上就是隐藏了一个子组件，等document.scroll滚动高度 与 第二个组件高度相同时(此时两个组件就是重合)，第一个组件就显示出来。而第二个组件依然是在页面上，只是超出了可视区域，看不到而已。父组件自定义内容import tabControl from '../subcomponents/tabControl.vue'export default {components:{tab...
HTML实现的Tab切换效果，点击滑动和触控滑动（SlideTouch插件）
03-27
HTML实现的Tab切换效果，点击滑动和触控滑动（SlideTouch插件），资源里面是源码！
匠心打造多tab自动吸顶下的多滚动容器（详细）
闲鱼技术的博客
09-16 2616
背景不知道什么时候开始，一种tab自动吸顶下的多容器嵌套滚动浏览交互方式逐渐风靡在各大电商APP（美团、京东、拼多多等）。这种相对复杂交互的滚动容器一般都在APP首页容易看到，实现的技术栈...
带吸附效果顶部导航（支持左右滑，下拉刷新，上拉加载更多，返回顶部，加载动画）.zip
07-09
1. **吸附效果**: 吸附效果是指当用户滚动内容时，顶部导航栏会在达到特定位置后固定在屏幕顶部，提供持续的导航选项。这种效果常见于新闻、社交和电商类应用，能保持关键操作触手可及，提高用户操作效率。 2. **...
flutter,SliverPersistentHeader实现Tab顶部吸附固定效果
weixin_30444105的博客
08-07 6105
直接上代码啦 import 'package:flutter/material.dart'; class StickyDemo extends StatefulWidget { @override _StickyDemoState createState() => _StickyDemoState(); } class _StickyDemoS...
html实现吸顶效果的几种方式
：）
12-07 6874
页面下拉之前是这样的： 想实现滑动滚动条往下的时候，导航保持在顶部的效果有几种方式实现？ 一：使用jquery实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>html实现吸顶效果的几种方式</title> </head> &lt...
京东网站顶部导航条 （练习） HTML+CSS
豆子的博客
07-03 884
京东网站顶部导航条 （练习） css+html
HTML和CSS实现京东首页（html和css详解）
热门推荐
道阻且长，行则将至。
12-20 1万+
HTML和CSS实现京东首页，效果图如下： 基本代码如下：需要源代码和素材的加Q（2997381395） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="descri
吸顶导航（滚动一定距离后显示另一个导航）
weixin_46058007的博客
06-07 243
使用VueUse实现吸顶导航
html上下滚动切换顶端tab,jQuery实现Tab菜单滚动切换的方法
weixin_33376592的博客
06-05 629
本文实例讲述了jQuery实现Tab菜单滚动切换的方法。分享给大家供大家参考。具体如下：这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/html4/strict.dtd"&g...
html上下滚动切换顶端tab,vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作...
weixin_42367947的博客
06-05 906
template里面:产品特点投保须知理赔流程设置fixTitle的样式,固定在顶部,cur是当前tab点击的颜色第一部分内容第二部分内容第三部分内容当点击第一个产品特点的时候,对应下面的第一部分内容,点击投保须知对应第二部分内容,点击理赔流程对应第三部分内容data里面:data(){return:{whether:false,curId:0}}curId默认为0,展示的是产品特点的内容,也就是...
jquery滚动tab吸顶，点击tab选项卡对应内容滚动到固定位置，滚动内容的同时选中对应tab选项卡
qq_43033730的博客
05-15 536
jquery滚动tab吸顶，点击tab选项卡对应内容滚动到固定位置，滚动内容的同时选中对应tab选项卡
vue实现导航tab吸顶 & 点击锚点动画跳转 & 监听滚动
EnidChann的博客
06-16 1925
示例图 页面代码 // 导航tab部分, 利用isFixed实现吸顶 <div class="floor bgW" ref="floorFixed" :class="{'isFixed': isFixed}"> <header v-for="(item,index) in navList" @click="clickToFloor(index)" :class="{'
前端移动端滑动吸顶效果实现
yuanwen52的博客
10-25 1415
1、使用Vant UI中的组件实现 Vant - Mobile UI Components built on Vue 2、自定义组件实现： 定义stickySlot.vue <template> <div class="sticky" :style="getPosition"> <div class="sticky-warp"> <slot></slot> </div> </di.
前端css粘性布局，顶部吸附效果（position: sticky）
来一颗砂糖橘
11-21 1万+
设置后（标签栏达到指定位置时，固定于该位置）/* 处于指定位置0时，触发固定效果 */设置前（滚动页面时，标签栏随页面滚动）/* 设置粘性布局 */
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值