粘性导航

最新推荐文章于 2023-07-01 23:25:14 发布
最新推荐文章于 2023-07-01 23:25:14 发布
阅读量248 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BOZAIer/article/details/84642026
版权

<!doctype html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<style type="text/css">
		body{position: relative;}
    	.x_box.se{position: fixed; top: 45px;background: #ACACB4;}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">MES</h1>
	</header>
	<div class="mui-content">
		<div id="" class="x_box mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		    <div class="mui-scroll">
		        <a class="mui-control-item mui-active">
		            推荐
		        </a>
		        <a class="mui-control-item">
		          热点
		        </a>
		        <a class="mui-control-item">
		           北京
		        </a>
		        <a class="mui-control-item">
		           社会
		        </a>
		        <a class="mui-control-item">
		           娱乐
		        </a>
		        <a class="mui-control-item">
		           科技
		        </a>
		        <a class="mui-control-item">
		           社会
		        </a>
		        <a class="mui-control-item">
		           娱乐
		        </a>
		        <a class="mui-control-item">
		           科技
		        </a>
		    </div>
		</div>
		<ul class="mui-table-view">
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                Item 1
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 2
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 3
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                Item 1
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 2
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 3
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                Item 1
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 2
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 3
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                Item 1
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 2
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 3
		            </a>
		        </li>
		    </ul>
	</div>
	
	<!--<div style="width:100%; height:500px; background:#f00;"></div>
    <div class="x_box" style="width:100%; height:50px; background:#ccc;">你看看我跟着屏幕动了吗？</div>
    <div style="width:100%; height:5000px; background:#f00;"></div>-->
	<script src="../js/jquery-1.11.1.js"></script>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init();
		var i=0;
	    $(window).scroll(function(){
	        i=$(window).scrollTop();
	        if(i>=1){
	            $(".x_box").addClass("se")

//             $("#x_box").css({‘position’:‘fixed’,‘top’:‘50px’})

	        }else{ 
	
	            $(".x_box").removeClass("se")

//             $("#x_box").css({‘postion’:‘inherit’})
        }

	    })
	</script>
</body>
aloom-cly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
24.粘性导航特效
粉丝们务必加入微信粉丝群
05-05 1881
效果 (源码网盘地址在最后) 视频演示 「编程挑战 24」粘性导航特效 视频地址一：https://www.bilibili.com/video/BV15K411577L/ 视频地址二：https://www.ixigua.com/i6821071022444249611/ ...
粘性导航栏
风花雪月，品霖千年之情
03-23 1796
粘性导航栏 为 < ul> 添加 position: sticky;，以创建粘性导航栏。 粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。 ul { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } 注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safar
粘性导航栏（使用HTML和CSS、JAVASCRIPT）
qq_58460470的博客
06-05 909
粘性导航栏（使用HTML和CSS、JAVASCRIPT）
粘性导航心得
weixin_30672019的博客
11-30 152
$(function () { $("body").scroll(function () { $("#nav thead>tr>th").each(function () { $(this).width($(this).width()); ...
导航栏黏性布局
weixin_33847182的博客
04-17 501
（目前手机不多等待日后更新）position:sticky 可以实现，目前测试下来iphone可以完美兼容安卓手机在近两年发行的手机里兼容性目前效果也理想目前测试华为met7及以下、魅族15PLUS 、红米not3不兼容小米max2s可以（小米手机现在不多） 转载于:https://juejin.im/post/5cb6efdf51882532bd4b6256...
jQuery粘性滚动导航栏特效代码
03-20
要使用 Smint 实现粘性导航栏，你需要遵循以下步骤： - **引入资源**：首先，在 HTML 文件中引入 jQuery 和 Smint 插件的 CSS 及 JS 文件。通常，jQuery 库可以从 Google CDN 或者本地服务器获取，Smint 插件则需要...
prettySticky:带有智能锚链接突出显示和徽标的粘性导航 jQuery 插件
07-14
带有智能锚链接突出显示和徽标的粘性导航 jQuery 插件 ==== ##1。 下载 下载prettySticky.js和prettySticky.css ##2。 设置 在你的head标签中包含对prettySticky.css引用。 在 HTML 页面底部的</body>标记...
sticky-nav:带有javascript html和css的粘性导航
05-12
粘性导航 带有javascript html和css的粘性导航
meteor-stickynavbar:粘性导航栏.js
06-11
《深入理解meteor-stickynavbar：打造智能锚链接与精美粘性导航的jQuery插件》 在网页设计中，导航栏是用户界面的关键组成部分，它帮助用户在网站的各个部分之间轻松导航。"meteor-stickynavbar"是一个专为jQuery...
jQuery粘性滚动导航栏.zip
07-04
在粘性导航栏的实现中，jQuery提供了便捷的DOM操作和动画效果支持。 2. **Smint插件**：Smint是专门为jQuery设计的一个插件，它的主要功能是在用户滚动页面时，将导航栏固定在浏览器窗口的顶部。它通过监听滚动事件...
jQuery Waypoints粘性顶部导航栏
11-21
jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏 jQuery Waypoints粘性顶部导航栏
粘性控件，滑动停留StickLayout（导航栏滑动停留）
wkp111的博客
01-04 1800
我们平时在使用APP的时候，经常可以见到一些导航栏滑到顶端就停留，而下面的控件可以接着滑动；今天，我就给大家介绍一个非常好用的滑动粘性控件StickLayout，它不仅可以让其任意一个直接子控件滑动停留在顶端，而且还可以设置滑动到指定直接子控件，并且配有滑动改变监听，可以轻松实现滑动时的联动操作；我们用该控件就可以轻松实现像支付宝“所有应用”界面效果，下面我们就一起学习一下吧。 首先，我们来
使用 CSS 构建自定义粘性导航栏
分享身边生活经验blog
10-20 1012
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式。人们通常将导航栏放在页面的最顶部，但如果它与您的设计相得益彰，您也可以在网页的任一侧放置导航栏。导航栏可以是导航项目的水平列表，也可以是小屏幕上网页左上角或右上角的汉堡样式。为了更好地访问导航栏，您可以使用几行 CSS 和 JavaScript 将它们粘贴在顶部。随着导航栏复杂性的增加，可能会堆积更多的 JavaScript 代码。
JS学习第5天——粘性导航栏
m0_65051363的博客
08-21 219
JS学习第5天——粘性导航栏
jQuery粘性跟随滚动条滚动的导航栏源代码下载
我们不生产任何代码 只做代码的搬运工
05-15 1733
特效介绍 jQuery粘性跟随滚动条滚动的导航栏源代码下载，不兼容IE6。点击导航栏不同的按钮，滑动到不同的内容。滚动条滚动，导航栏会自始至终保持在浏览器可是区域的最顶端。 使用方法 第一步、在head区域引入下面的css样式: 01 link href="http://fonts.googleapis.com/css?family=Open+Sa
[贝聊科技]粘性导航问题总结
weixin_33704234的博客
08-31 149
@韩永豪 贝聊科技 移动开发部 前端 菜鸟工程师 什么是粘性导航 本文讨论的粘性导航是指，常规状态下为静态定位，且因页面滚动而超出屏幕显示范围时，仍然固定在屏幕某个地方的元素。效果如下： 案例 对应的HTML结构如下： &lt;header id="banner" class="header"&gt;banner&lt;/header&gt; &lt;div class="wrap"&gt;..
117.实战网页实现粘性导航栏
最新发布
分享学习网络的点点滴滴
07-01 301
position: fixed” 是 CSS 中的一个属性，用于控制元素的定位方式。当一个元素被设置为 “position: fixed” 时，它的位置将相对于浏览器窗口而不是文档流中的其他元素进行定位。这意味着即使页面滚动，该元素的位置也不会改变。通常，“position: fixed” 属性用于创建固定在页面顶部或底部的导航栏、工具栏或广告等元素。由于这些元素需要保持在页面的相同位置，不受页面滚动的影响，因此使用 “position: fixed” 可以很方便地实现这个效果。
CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）
热门推荐
qq_30906791的博客
11-03 1万+
0. 导航栏 创建导航栏之前需要掌握列表的样式以及链接的样式，因为：导航栏=链接列表，链接列表使用到列表和超链接 1. 垂直导航栏 垂直导航栏使用到的是垂直列表 设置导航栏的背景色为gray灰色 设置正常字体为黑色，悬停字体为白色 设置导航栏悬停时更改背景色为green绿色 将列表项中的超链接设置为有合适长度和宽度的元素 添加激活列表项始终是背景色为green绿色，字体白色 将超链接中的的文本内容居中 添加超链接的边框 在原来导航栏的基础上可以将导航栏设置为高度百分之百，宽度固定 创建具有灰色背景色
html nav均匀分布的粘性导航栏
随风潜入夜，不白头
01-26 1580
有三个月没真正做前端页面的了，今天记录一下导航条的制作 》》》 &lt;nav class="app_header"&gt; &lt;div class="app_header_nav"&gt; &lt;ul class="app_header_ul header_ul"&gt; &lt;li &gt;&am
sticky_navbar:使用js更改样式的粘性导航栏的示例
04-19
非常感谢您的提问！关于您的问题，以下是一个简单的示例代码： HTML: ```html <div class="navbar"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </div> <div class="content"> <p>Content goes here</p> </div> ``` CSS: ```css .navbar { background-color: #333; overflow: hidden; position: fixed; top: 0; width: 100%; } .navbar a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .content { margin-top: 50px; } ``` JS: ```javascript window.onscroll = function() {stickyNavbar()}; var navbar = document.querySelector(".navbar"); var sticky = navbar.offsetTop; function stickyNavbar() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } } ``` 在这个示例中，我们定义了一个 `navbar` 和一个 `content`，并将 `navbar` 设置为固定位置。然后，我们使用 JavaScript 监听滚动事件，当滚动到一定位置时，将 `navbar` 添加一个 `sticky` 类，这样就可以更改其样式，使其保持粘性。在 CSS 样式中，我们为粘性导航栏设置了背景颜色，并使用 `overflow: hidden` 隐藏溢出部分。当 `navbar` 添加了 `sticky` 类时，我们还可以为其添加样式，比如 `box-shadow` 或者改变其 `z-index` 值，以使其更加突出。 希望这个示例可以帮助您理解如何使用 JavaScript 更改样式以实现粘性导航栏的功能。如果您有任何其他问题，欢迎随时提问！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值