纯css的一个tab 吸顶

最新推荐文章于 2022-10-26 15:28:36 发布
最新推荐文章于 2022-10-26 15:28:36 发布
阅读量289 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43707525/article/details/109313093
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        list-style: none;
        padding: 0;
        margin: 0;
    } 
    html,body{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .warp{
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .item-title{
        width: 100%;
        background: rgb(128, 123, 128)
    }
    .item-title{
        top: 0px;
        position: sticky;
    }
   .right{
       position: fixed;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       flex-direction: column;
       z-index: 10;
   }
</style>
<body>
    <ol class="right">
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li>
        <li><a href="#C">C</a></li>
        <li><a href="#D">D</a></li>
        <li><a href="#E">E</a></li>
        <li><a href="#F">F</a></li>
        <li><a href="#G">G</a></li>
    </ol>
    <div class="warp">
        <ul class="ul" id="A">
            <li class="item-title">
                A
            </li>
            <li>
                A1
            </li>
            <li>
                A2
            </li>
            <li>
                A3
            </li>
            <li>
                A4
            </li>
            <li>
                A5
            </li>
            <li>
                A6
            </li>
            <li>
                A7
            </li>
        </ul>
        <ul class="ul" id="B">
            <li class="item-title">
                B
            </li>
            <li>
                B1
            </li>
            <li>
                B2
            </li>
            <li>
                B3
            </li>
            <li>
                B4
            </li>
            <li>
                B5
            </li>
            <li>
                B6
            </li>
            <li>
                B7
            </li>
        </ul>
        <ul class="ul" id="C">
            <li class="item-title">
                C
            </li>
            <li>
                C1
            </li>
            <li>
                C2
            </li>
            <li>
                C3
            </li>
            <li>
                C4
            </li>
            <li>
                C5
            </li>
            <li>
                C6
            </li>
            <li>
                C7
            </li>
        </ul>
        <ul class="ul" id="D">
            <li class="item-title">
                D
            </li>
            <li>
                D1
            </li>
            <li>
                D2
            </li>
            <li>
                D3
            </li>
            <li>
                D4
            </li>
            <li>
                D5
            </li>
            <li>
                D6
            </li>
            <li>
                D7
            </li>
        </ul>
        <ul class="ul" id="E">
            <li class="item-title">
                E
            </li>
            <li>
                E1
            </li>
            <li>
                E2
            </li>
            <li>
                E3
            </li>
            <li>
                E4
            </li>
            <li>
                E5
            </li>
            <li>
                E6
            </li>
            <li>
                E7
            </li>
        </ul>
        <ul class="ul" id="F">
            <li class="item-title">
                F
            </li>
            <li>
                F1
            </li>
            <li>
                F2
            </li>
            <li>
                F3
            </li>
            <li>
                F4
            </li>
            <li>
                F5
            </li>
            <li>
                F6
            </li>
            <li>
                F7
            </li>
        </ul>
        <ul class="ul" id="G">
            <li class="item-title">
                G
            </li>
            <li>
                G1
            </li>
            <li>
                G2
            </li>
            <li>
                G3
            </li>
            <li>
                G4
            </li>
            <li>
                G5
            </li>
            <li>
                G6
            </li>
            <li>
                G7
            </li>
        </ul>
    </div>
</body>

</html>
我可能会飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML + CSS: 实现Tab导航栏（一）
Nnnn的博客
07-29 2368
前几天想写个Tab导航栏，在搜索引擎搜到C站一位bz的文章(注1)。代码虽短小，觉得有些意思，稍微修葺完成一个简单的Tab导航栏。基本原理是使用radio类型的input标签的属性选择器来修改不同状态tab标签的style样式和内容模块的z-index属性，从而实现tab标签的状态转换和内容显示。不得不说，CSS选择器2真的很强大。适当的使用就可以精简很多不必要的代码。当然配合使用Javascript提升用户体验也是不错的选择。为了简化说明，这里没有提及Javascript代码。......
html tab顶部吸附,移动端滚动页面 header吸附顶部/固定顶部
weixin_34664632的博客
06-17 500
实现思路实际上就是隐藏了一个子组件，等document.scroll滚动高度 与 第二个组件高度相同时(此时两个组件就是重合)，第一个组件就显示出来。而第二个组件依然是在页面上，只是超出了可视区域，看不到而已。父组件自定义内容import tabControl from '../subcomponents/tabControl.vue'export default {components:{tab...
css粘性定位做吸顶
weixin_52615140的博客
07-28 700
粘性定位
tab吸顶功能实现，css实现沾性吸顶，sticky实现吸顶，解决sticky吸顶失效
m0_60531448的博客
10-26 936
tab吸顶功能实现，css实现沾性吸顶，sticky实现吸顶，解决sticky吸顶失效。
吸顶效果：1.css属性sticky优缺点 2.简单js实现吸顶效果
qq_43682422的博客
10-10 2327
document.documentElement.scrollTop 有些移动端不支持，导致无法获取正确的滚动高度，使用document.body.scrollTop移动端也能正常获取，兼容一下）（小细节：offsetTop计算的是当前元素距离父元素顶部的高度，多层嵌套则需要递归叠加offsetTop，所以建议是选取最外面的那层元素，则可以直接获取距离窗口的高度）当页面滚动高度超过元素距离窗口的高度，设置为fixed，且top为0（当然bottom也可以，数值随便设）1）计算元素距离窗口的高度。
浅谈react.js中实现tab吸顶效果的问题
10-19
在React.js中实现Tab吸顶效果，主要是为了创建一种用户友好的界面，使得当页面滚动到特定区域（如Tab导航）时，该区域会固定在屏幕顶部，以便用户始终能够轻松访问。这个问题的解决方案通常涉及到对滚动事件的监听、...
基于uniapp的多tab滚动吸顶效果
11-19
【标题】"基于uniapp的多tab滚动吸顶效果"涉及到的是在移动应用开发中，如何利用uniapp框架实现一个动态的多标签页（tab）滚动时固定在顶部（吸顶）的效果。uniapp是一个使用Vue.js语法开发跨平台应用的框架，它允许...
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
10-14
在实际应用中，我们会在需要吸顶效果的`el-table`元素上使用`v-generate-uuid`指令，并传递一个布尔值，如`v-generate-uuid="false"`，这是因为指令默认需要一个值，但在这个案例中我们并不需要传入具体值，所以传递...
css锚点定位被顶部固定导航栏遮住的解决方案
11-21
在目标元素上方添加一个无视觉效果的元素（暗锚点），设置其`height`和负的`margin-top`来调整锚点的位置。这样可以避免影响目标元素本身的样式和布局。 4. **`:target`伪类**： 利用CSS的`:target`伪类，当页面...
微信小程序实现吸顶特效
10-15
在这个例子中，我们看到一个 `<view>` 元素，它有一个 `id` 为 "tab"，并包含两个 `<van-col>` 子元素，分别用于显示 "食疗方法" 和 "动作方法" 的标题。`xiding` 类用于定义吸顶的基础样式，而 `goods_row` 和 `...
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
tab吸顶问题总结
fengchenguo的博客
12-14 2915
前言 最近由于经手的任务遇到过几回tab吸顶的问题，其实tab吸顶实现并不难，但是tab吸顶常常是与选项卡切换一起出现的。本人较菜并且记忆力不好，所以记录下，哈哈哈！ 一、tab吸顶的实现方式 tab吸顶可以通过几种方式实现，实现大体分为两种：1.css实现 2.js监听scroll实现；但是实际开发中使用的就是一种那就是js的实现方式。但不管怎么说，该说得说，不必要（其实也挺有必要）说的也得说说 1.position:sticky实现吸顶(不推荐) sticky其实就是fixed与relative这两
前端CSS三种实现导航栏吸顶效果
Mr.小灰狼_随笔
08-03 6244
前端CSS三种实现导航栏吸顶效果 目录 1、sticky : 粘性定位 2、fixed : 固定定位 3、relative + absolute 结合使用 创作场景 ： 调研问卷随着创建的题目数量越来越多 ，页面越来越长 ， 等到用户创建完题目之后还要自己翻到顶部去点击发布 ，属实太麻烦 ， ( 当然你也可以自己加一个返回顶部的按钮供用户使用也可以) 所以为了进一步的优化用户体验 ，要实现一个将操作导航栏进行 “ 吸顶 ” 的一个效果 ， 在这里呢 ， 主要使用了 css 属性的三种定位.
纯css的吸顶效果实现——使用“position:sticky”
SCUhzs
07-30 7556
文章目录一.sticky用法1.1 示例11.2 示例2二.sticky使用过程中的坑2.1 只在 Containing Block 内有效2.2 Overflow对Sticky的影响2.3.兼容问题三.应用场景3.1 表格的查看3.2 导航栏、栏目条等吸顶效果四、参考资料 一.sticky用法 使用 CSS Sticky 需要两个条件。 position: sticky; top: 0; /*top/right/bottom/left 任一有效值*/ top：0 意思是当元素滑动到距离视口 0
php 实现tab切换_纯CSS实现Tab页切换效果
weixin_36486277的博客
03-09 340
这次给大家带来纯CSS实现Tab页切换效果，纯CSS实现Tab页切换效果的注意事项有哪些，下面就是实战案例，一起来看一下。最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。1、利用 :hover 选择器缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果2、利用 a标签的锚点 + :targ...
史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼
黄沙百战穿金甲，不破楼兰终不还。
01-06 1万+
下载地址：http://download.csdn.net/detail/cometwo/9393614html文件<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3外观漂亮淡入淡出Tab菜单演示</title> <link rel="stylesheet" href="cs
html，css，原生js——实现Tab(tab)选项卡切换效果——自动切换
热门推荐
代码小宝宝的博客
02-14 3万+
html，css，js实现简单的Tab(tab)选项卡切换效果——延迟切换 1.Demo展示： 计时器未生效： 计时器事件生效： 如要实现马上切换效果，请查看：link(https://blog.csdn.net/qq_43495629/article/details/87185286). 如要实现延迟切换效果，请查看：link(https://blog.csdn.net/qq_...
CSS实现Tab布局
weixin_34289454的博客
04-05 363
一、布局方式 1、内容与tab分离 <div class="container"> <div class="tab-content"> <div id="item1" class="item">内容1</div> <div id="item2" class="...
css 导航吸顶
最新发布
06-01
要实现 CSS 导航吸顶效果，可以使用 CSS 中的 `position` 属性和 `z-index` 属性。具体步骤如下： 1. 首先，给导航栏添加一个固定的 `position: fixed` 样式，使其脱离文档流，不会随着页面的滚动而移动。 2. 给导航栏添加一个 `top` 属性，设置其距离页面顶部的距离，使其吸附在页面顶部。 3. 设置导航栏的 `z-index` 属性，使其在页面上方，不被其他元素遮挡。 示例代码如下： ```css .nav { position: fixed; top: 0; z-index: 9999; } ``` 其中，`.nav` 为导航栏的类名或 ID 名称，具体根据实际情况来定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值