实现导航栏随滚动条的滑动固定

最新推荐文章于 2021-05-29 10:08:06 发布
最新推荐文章于 2021-05-29 10:08:06 发布
阅读量1.6k 收藏 4
点赞数 3
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/litternannan/article/details/105224749
版权

实现导航栏随滚动条的滑动固定

粘性定位sticky

  • 可以被认为是相对定位和固定定位的混合，sticky粘性的语法
  • 选择器{position:sticky;
    top:10px; }
  • 粘性定位的特点
  • ①以浏览器的可视窗口为参照点移动元素（固定定位的特点）
  • ②粘性定位占有原先的位置（相对定位）
  • ③必须添加top，left，right，bottom其中一个才有效
    兼容性特别差额。。。
Namnan
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滑动导航栏固定
一梦醉殇
12-26 318
滑动导航栏固定   *{padding: 0px;margin: 0px;}   .home_top{height: 400px;background-color: #4BC5F2;text-align: center;font-size: 24px;line-height: 400px;}   #mainMenuBar{width: 100%;height: 100px;backgro
滑动页面固定导航栏
笋笋的博客
07-20 176
getElementRect: function (element) { var rect = element.getBoundingClientRect() // 距离视窗的距离 var top = document.documentElement.clientTop ? document.documentElement.clientTop : 0 // html元素对象的上边框的宽度 var left = .
html单个导航栏滑动固定
long_24k_os的博客
10-21 1004
<html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title> </head> <body>     <!-- 此处引入百度的cdn,方便调试 -->...
跟随滚动条而下滑的导航栏
weixin_34150503的博客
12-07 389
先来简单说说原理：监测浏览器滚动条的距离，大于一定长度时，给导航栏添加“position:fixed”，小于则取消，同时还添加了animate自定义的透明度渐变过渡！现在网页也很流行的效果 相关jQuery代码段： $(window).scroll(function(){ varscrollTop=$(window).scrollTop(); ...
滑动滚动条，某元素依然固定在某个位置
qq_40927742的博客
09-02 924
将下面的map_left名字替换成需要的名字即可 <style> .fixDiv{position:fixed;top:15px;}/*相对于浏览器定位*/ </style> <script type="text/javascript"> $(function(){ var banOffTop=$(".map_left").offse...
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
在网页设计中，创建一个固定在顶部且支持左右滑动的导航栏是一个常见的需求，尤其在移动设备上，这样的设计可以有效地节省屏幕空间并提供良好的用户体验。本文将详细讲解如何使用CSS来实现这一功能。 首先，为了...
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
12-10
【博客侧边栏模块跟随滚动条滑动固定效果的实现方法】 在网页设计中，侧边栏通常用于显示各类辅助信息，如文章分类、广告、最新评论等。然而，当页面内容过长时，传统的侧边栏设计可能导致部分模块无法在用户视野内...
Android自定义控件实现可左右滑动的导航条
09-02
本文将详细解析如何实现一个可左右滑动的导航条，该控件能够响应快速滑动，并具备一定的自定义样式功能。 首先，我们需要理解这个自定义控件的主要功能。该控件需具备以下特性： 1. **响应左右滑动**：用户可以...
jQuery固定导航随页面滚动颜色渐变
10-29
"jQuery固定导航随页面滚动颜色渐变"这个主题涉及到的技术点主要是利用jQuery库来实现导航栏随着页面滚动而动态改变颜色的效果，为用户带来更丰富的视觉体验。 首先，我们需要了解jQuery库。jQuery是一个快速、简洁...
JQ滑动变色菜单_导航条变色滑动显示
10-31
"JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践，它利用jQuery库来实现导航条在用户滚动页面时的动态变化，特别是颜色的变换，为网站增添视觉吸引力和互动性。jQuery（简称JQ）是一个广泛使用的JavaScript...
jquery左侧导航栏加滚动条美化
12-18
简洁的左侧导航菜单，有精美的滚动条，下载直接可以展示的！！
实现界面垂直滚动条随焦点控件移动而移动
08-01
界面上有很多控件，而且控件焦点利用Tab或者Enter建操作，但是垂直滚动条位置也需要跟随焦点位置移动，方便查看界面遮住的部分。该实例利用递归算法，逐层计算出当前焦点控件所对应于滚动条所在容器的相对Y坐标，给滚动条设置最新位置坐标。
下拉滚动吸顶式导航栏固定导航栏吸附导航栏
爱读书的旅行者
10-10 8679
下拉滚动吸顶式导航栏固定导航栏吸附导航栏的设计 1、效果展示 如图所示，当滚动至banner图片不可见时，吸顶式导航栏缓慢出现。 2、设计思路 滚动时获取离顶部的距离 距顶部距离超过设定值时，修改顶部导航栏样式 将原有导航栏设置为fixed，吸附顶部 为了效果美观，可以添加transition过渡效果 3、分步讲解 1）模拟导航栏 如图，先模拟一个这样的导航栏，具体代码如下所示 &lt;!...
jQuery粘性跟随滚动条滚动的导航栏源代码下载
我们不生产任何代码 只做代码的搬运工
05-15 1730
特效介绍 jQuery粘性跟随滚动条滚动的导航栏源代码下载，不兼容IE6。点击导航栏不同的按钮，滑动到不同的内容。滚动条滚动，导航栏会自始至终保持在浏览器可是区域的最顶端。 使用方法 第一步、在head区域引入下面的css样式: 01 link href="http://fonts.googleapis.com/css?family=Open+Sa
滑动到底部 固定侧边栏
花花的博客
06-02 861
J_BdSide是滑动侧边栏id选择器&lt;script&gt; $(window).scroll(function() { var windowHeight = $(window).scrollTop() + $(window).height(); //获取滚动条滚动距离+窗口高度 var sideHeight = $('#J_BdSide').height(); /...
滚动条显示导航栏
chen2745213271的博客
05-29 1132
首先写一个简易的顶部导航栏，并写上一些简易的CSS样式来装饰一下。如下图 注意，CSS里我在ul标签上写了固定定位且top赋值为-50px，因为ul标签的高度是50px而我又写了固定定位这时候把top赋值为-50px的话就会刚刚好把ul标签带到屏幕上面，也就会看起来把ul标签隐藏了 HTML部分下面有个div我是给了1200px的高度，因为这是一个简易的案例，所以我用了个盒子把页面顶了起来，这样子页面上就会有滚动条供我们使用。 下面是js部分了，首先给文档绑定滚动条滚动事件并使用事件对象，然后
scroll（）实现导航栏跟随滚动
u012999318的专栏
10-16 6012
跟随滚动              body{position: relative;}         .se{position: fixed; top: 0;}                    var i=0;     $(window).scroll(function(){         i=$(window).scrollTop();         if(i>=
带滑动条的导航栏(上)---CSS实现样式
王文松的博客
12-14 9620
前言    本系列实现的是带有滑动条的导航栏，效果图如下       我看其它的网站，对比之下还是喜欢这种简洁大方的感觉，于是乎扒拉下来了。 布局层    首先，我新建了一个navigator1.html，先用div布局，如下     滑动条导航栏 body{margin: 0; } ul, li{margin: 0; padding: 0;}
带滑动条的导航栏(中)---jQuery实现滑动效果
热门推荐
王文松的博客
12-16 1万+
前言    本节利用jQuery实现最终的滑动效果。 网页代码   navigator2.html    导航栏 (function ($) { $(function () { nav(); }); function nav() { var $liCur = $(".nav-box ul li.cur"),
html5如何实现横向滑动导航栏
最新发布
05-13
可以使用 HTML5 中的 `<nav>` 标签结合 CSS3 中的 `overflow-x` 属性和 `white-space: nowrap` ...这样，当导航栏的链接数量超出了 `<nav>` 标签的宽度时，导航栏会自动出现横向滚动条，用户可以通过滚动条滑动导航栏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值