粘性导航

最新推荐文章于 2022-10-20 09:29:24 发布
最新推荐文章于 2022-10-20 09:29:24 发布
阅读量242 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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
    评论
CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）
qq_30906791的博客
11-03 1万+
0. 导航栏 创建导航栏之前需要掌握列表的样式以及链接的样式，因为：导航栏=链接列表，链接列表使用到列表和超链接 1. 垂直导航栏 垂直导航栏使用到的是垂直列表 设置导航栏的背景色为gray灰色 设置正常字体为黑色，悬停字体为白色 设置导航栏悬停时更改背景色为green绿色 将列表项中的超链接设置为有合适长度和宽度的元素 添加激活列表项始终是背景色为green绿色，字体白色 将超链接中的的文本内容居中 添加超链接的边框 在原来导航栏的基础上可以将导航栏设置为高度百分之百，宽度固定 创建具有灰色背景色
117.实战网页实现粘性导航栏
最新发布
分享学习网络的点点滴滴
07-01 298
position: fixed” 是 CSS 中的一个属性，用于控制元素的定位方式。当一个元素被设置为 “position: fixed” 时，它的位置将相对于浏览器窗口而不是文档流中的其他元素进行定位。这意味着即使页面滚动，该元素的位置也不会改变。通常，“position: fixed” 属性用于创建固定在页面顶部或底部的导航栏、工具栏或广告等元素。由于这些元素需要保持在页面的相同位置，不受页面滚动的影响，因此使用 “position: fixed” 可以很方便地实现这个效果。
使用 CSS 构建自定义粘性导航栏
分享身边生活经验blog
10-20 999
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式。人们通常将导航栏放在页面的最顶部，但如果它与您的设计相得益彰，您也可以在网页的任一侧放置导航栏。导航栏可以是导航项目的水平列表，也可以是小屏幕上网页左上角或右上角的汉堡样式。为了更好地访问导航栏，您可以使用几行 CSS 和 JavaScript 将它们粘贴在顶部。随着导航栏复杂性的增加，可能会堆积更多的 JavaScript 代码。
JS学习第5天——粘性导航栏
m0_65051363的博客
08-21 214
JS学习第5天——粘性导航栏
粘性导航栏（使用HTML和CSS、JAVASCRIPT）
qq_58460470的博客
06-05 898
粘性导航栏（使用HTML和CSS、JAVASCRIPT）
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粘性顶部导航栏
粘性导航栏
风花雪月，品霖千年之情
03-23 1793
粘性导航栏 为 < ul> 添加 position: sticky;，以创建粘性导航栏。 粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。 ul { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } 注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safar
粘性导航心得
weixin_30672019的博客
11-30 151
$(function () { $("body").scroll(function () { $("#nav thead>tr>th").each(function () { $(this).width($(this).width()); ...
html粘性导航原理,position:sticky粘性定位
weixin_36394468的博客
06-01 1472
在浏览网站时，通常会看到HTML元素(如横幅和导航)滚动到一定位置时就固定在浏览器的顶部。之前我们一直采用JavaScript滚动事件来监听滚动到一定位置时给此元素添加position: fixed固定定位。你是知道的固定定位是脱离文档流的哟，因此事先在HTML结构上，不要忘了给这个元素添加一个父元素写上高度占位，不然滚动到一定位置时就会出现页面抖动。如果不写高度占位，你可以尝试CSS Scrol...
CSS:粘性布局设置导航栏
qq_45134635的博客
11-11 1404
学习html和css制作静态网页的过程中，想要实现导航栏在随着滚轮滚动一段距离后吸附在顶部的效果，需要使用到粘性布局position: sticky ; position:sticky; 是position:absolute;（绝对定位）和position:fixed;（固定定位）的综合体。 在设置距离以内，元素以绝对定位的方式随滚轮滚动而滚动，超过设置距离后，元素以固定定位的方式固定在原地，不随滚轮的滚动而移动。 代码块主要代码行： 父元素中设置： { height: 100px ;...
html nav均匀分布的粘性导航栏
随风潜入夜，不白头
01-26 1573
有三个月没真正做前端页面的了，今天记录一下导航条的制作 》》》 &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
24.粘性导航特效
粉丝们务必加入微信粉丝群
05-05 1878
效果 (源码网盘地址在最后) 视频演示 「编程挑战 24」粘性导航特效 视频地址一：https://www.bilibili.com/video/BV15K411577L/ 视频地址二：https://www.ixigua.com/i6821071022444249611/ ...
导航栏黏性布局
weixin_33847182的博客
04-17 496
（目前手机不多等待日后更新）position:sticky 可以实现，目前测试下来iphone可以完美兼容安卓手机在近两年发行的手机里兼容性目前效果也理想目前测试华为met7及以下、魅族15PLUS 、红米not3不兼容小米max2s可以（小米手机现在不多） 转载于:https://juejin.im/post/5cb6efdf51882532bd4b6256...
sticky_navbar:使用js更改样式的粘性导航栏的示例
04-19
在 CSS 样式中，我们为粘性导航栏设置了背景颜色，并使用 `overflow: hidden` 隐藏溢出部分。当 `navbar` 添加了 `sticky` 类时，我们还可以为其添加样式，比如 `box-shadow` 或者改变其 `z-index` 值，以使其更加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值