吸顶式导航与视觉差效果

最新推荐文章于 2025-05-14 15:47:02 发布
原创 最新推荐文章于 2025-05-14 15:47:02 发布 · 879 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

吸顶式导航效果

什么是吸顶式导航效果

首先要创建个吸顶导航栏，这个吸顶导航栏的初始位置一般是靠近在页面的顶部位置，当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部，就实现吸顶式导航效果。

具体代码如下：

body代码：

<div class="one1">
			<h2>SYROS</h2>
			<ul class="one1_ul">
				<li>
					<a href="">HOME</a>
					<ul class="Home_ul ">
						<li class="Home_ul_li"></li>
						<li class="Home_ul_li1">
							<a href="">HOME Default</a>
						</li>
						<li>
							<a href="">HOME Onepage</a>
						</li>
						<li>
							<a href="">HOME Business</a>
						</li>
						<li>
							<a href="">HOME Agency</a>
						</li>
						<li>
							<a href="">HOME Landing</a>

						</li>
						<li>
							<a href="">HOME Shop</a>
						</li>

					</ul>
				</li>
				<li>
					<a href="">PAGES</a>
					<ul class="Home_ul">
						<li class="Home_ul_li"></li>
						<li class="Home_ul_li1">
							<a href="">Services</a>
							<ul class="servies_ul">
								<li>
									<a href="">Services1</a>
								</li>
								<li>
									<a href="">Services2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">About Us</a>
							<ul class="servies_ul">
								<li>
									<a href="">About Us1</a>
								</li>
								<li>
									<a href="">About Us2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Contact</a>
							<ul class="servies_ul">
								<li>
									<a href="">Contact1</a>
								</li>
								<li>
									<a href="">Contact2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">404</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">PORTFOLIO</a>
					<ul class="Home_ul">
						<li class="Home_ul_li"></li>
						<li class="Home_ul_li1">
							<a href="">Classic</a>
							<ul class="servies_ul">
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Fullwidth</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Masonry</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">5 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">With Title</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Single Project</a>
							<ul class="servies_ul">
								<li>
									<a href="">Standard</a>
								</li>
								<li>
									<a href="">Extended</a>
								</li>

							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a href="">BLOG</a>
					<ul class="Home_ul">
						<li class="Home_ul_li"></li>
						<li class="Home_ul_li1">
							<a href="">Standard</a>
						</li>
						<li>
							<a href="">Masonry</a>
						</li>
						<li>
							<a href="">Single Post</a>
						</li>
						<li>
							<a href="">No Sidebar</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">SHOP</a>
					<ul class="Home_ul">
						<li class="Home_ul_li"></li>
						<li class="Home_ul_li1">
							<a href="">Catalog Grid</a>
						</li>
						<li>
							<a href="">Single Product</a>
						</li>
						<li>
							<a href="">Cart</a>
						</li>
						<li>
							<a href="">Checkout</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">FEATURES</a>
				</li>

			</ul>
			<div>
				<span class="glyphicon glyphicon-shopping-cart shopping-cart-my" aria-hidden="true"></span>
				<span class="glyphicon glyphicon-search search-my" aria-hidden="true"></span>
				<span class="glyphicon glyphicon-align-justify align-justify-my" aria-hidden="true"></span>
			</div>
			<hr />
		</div>
		<div class="banner">
			<div class="banner_large_character">About Us</div>
			<div class="banner_large_character1">
				<ul class="banner_large_character1_ul">
					<li>Home</li>
					<li>/ Page</li>
					<li>/ About us</li>
				</ul>
			</div>
		</div>

css代码：

在这里插入代码片body {
	margin: 0px;
}


/***************one1 css start******************/

.one1 {
	color: white;
	width: 100%;
	height: 76px;
	/*设置绝对布局*/
	position: absolute;
	/*显示叠加的效果*/
	z-index: 1000;
}

.one1 h2 {
	float: left;
	margin-left: 35px;
}

.sticky {
	position: fixed;
	background: #FFFFFF;
	visibility: hidden;
	color: #000000;
	box-shadow: 0 0 10px 1px #000000;
}

.sticky .one1_ul li a {
	color: #000000;
}

.offset {
	transform: translate(0, -100%);
	transition: all 0.5s ease-in-out;
}

.scrolling {
	visibility: visible;
	transform: translate(0, 0);
}


/**
 * 第一层嵌套
 */

.one1_ul {
	float: left;
	list-style: none;
	margin-left: 400px;
	margin-top: 20px;
}

.one1_ul li {
	float: left;
	padding: 10px 10px 0px 10px;
}

.one1_ul li a {
	text-decoration: none;
	color: white;
}

.one1_ul li a:hover {
	color: red;
}


/**
 * 第二层嵌套
 */

.Home_ul {
	position: absolute;
	display: none;
}

.Home_ul_li {
	opacity: 0;
	height: 26px;

}

.Home_ul_li1{
	border-top: 3px solid #e7634d;
}

.Home_ul li {
	width: 150px;
	float: none;
	list-style: none;
	background: #ffffff;
	
}

.Home_ul li a {
	color: #000000;
}

.one1_ul li:hover .Home_ul {
	display: block;
}


/**
 * 第三层嵌套
 */

.servies_ul {
	position: absolute;
	display: none;
	background: white;
	margin-left: 140px;
	margin-top: -33px;
	border-top: 3px solid #e7634d;
}

.servies_ul li {
	width: 150px;
	height: 30px;
	margin-bottom: 30px;
}

.Home_ul li:hover .servies_ul {
	display: block;
}

.shopping-cart-my {
	margin-left: 350px;
	margin-top: 30px;
	font-size: 1.5em;
}

.search-my {
	margin-left: 20px;
	font-size: 1.5em;
}

.align-justify-my {
	margin-left: 20px;
	font-size: 1.5em;
}


/********************one1 css end***************************/


/*****************banner css Start*******************/

.banner {
	float: left;
	width: 100%;
	height: 700px;
	background-image: url(img/about_us_title_bg.jpg);
	/*使图片平铺*/
	background-size: cover;
	background-attachment: fixed;
}

.banner_large_character {
	width: 70%;
	height: 100px;
	color: white;
	text-align: center;
	font-size: 5em;
	/*设置居中*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 300px;
}

.banner_large_character1 {
	width: 70%;
	height: 100px;
	color: white;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.banner_large_character1_ul {
	list-style: none;
	margin-left: 440px;
}

.banner_large_character1_ul li {
	float: left;
	margin-right: 10px;
}


/*********************banner css end*******************************/

jquery代码

<!-- jQuery Scripts -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/plugins.js"></script>
		<script type="text/javascript">
			$(window).scroll(function() {

				if($(window).scrollTop() > 190) {
					$('.one1').addClass("sticky");
				} else {
					$('.one1').removeClass("sticky");
				}

				if($(window).scrollTop() > 200) {
					$('.one1').addClass("offset");
				} else {
					$('.one1').removeClass("offset");
				}

				if($(window).scrollTop() > 500) {
					$('.one1').addClass("scrolling");
				} else {
					$('.one1').removeClass("scrolling");
				}

			});
		</script>

视觉差效果

滚动的时候图片没有动，但是感觉图片是在移动的效果

具体代码如下

body代码
<div class="declaratin">
			<div class="declaratin_lv" data-stellar-background-ratio="0.3" style="background-position: 50% 0">
				<div class="declaratin_text">
					It's not just about ideas. It's about making ideas happen </div>
			</div>

		</div>
css代码
.declaratin {
	float: left;
	width: 100%;
	height: 600px;
}

.declaratin_lv {
	position: absolute;
	width: 100%;
	height: 80%;
	background: url(img/quote_mission.jpg);
	/*使图片固定不动*/
	background-attachment: fixed;
	z-index: -1;
}

.declaratin_text {
	color: white;
	font-size: 5em;
	text-align: center;
	margin: 150px;
}
jquery代码
<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/plugins.js"></script>
		<script type="text/javascript">
			$.stellar({
				horizontalScrolling: false,
				hideDistantElements: false
			});
			$(window).load(function() {

				setTimeout(function() {
					$.stellar('refresh');
				}, 1000);

			});
			</script>
vue吸顶导航
qq_42312396的博客
03-27 1982
自己边查资料边做，不过最后用的还是原生dom的方法，其实用$refs就可以了，但是反正滚动监听还是用的原生，所以也没关系了。 html导航 <div class="contain"> <div class="nav-bar-wrap"> <ul class="banner"> <li v-for="value in banner_list" :key="value" @
吸顶导航
sinat_24496253的博客
12-19 556
导航菜单固定头部跟随屏幕滚动jQuery插件 $(function() { $('.nav').posfixed({ distance: 0, pos: 'top', type: 'while', hide: false }); }); 说 明 使 用 参 数 兼 容 body
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
js吸顶导航
喵喵的博客
07-09 682
吸顶导航 当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。 吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如Banner图。 当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部
Vue3----吸顶导航
weixin_52053631的博客
07-04 1537
3.以滚动距离做判断条件控制组件盒子展示隐藏。1. 准备吸顶导航组。
吸顶导航栏的实现与应用
4. **交互效果：** 为了提升用户体验，吸顶导航栏应当具备适当的交互效果，比如在用户进行操作时有明显的视觉反馈（如颜色变化、大小缩放等）。 5. **导航内容：** 导航栏中应包含指向网站或应用内关键部分的链接，...
创新滚动吸顶导航栏：随鼠标动态显示隐藏
最后，文件名称“滑动滚动吸顶式导航栏”在文件系统中的命名，意味着开发者在组织文件和资源时，应该将与导航栏相关的HTML文件、CSS样式表、JavaScript代码等放置在一起，并命名为与功能描述一致的名称，这样可以...
安卓悬浮吸顶效果.zip
01-01
3. **AppBarLayout**: 通常与CoordinatorLayout一起使用，用于实现类似抽屉式导航、工具栏收缩等效果。在悬浮吸顶场景下，AppBarLayout可以管理顶部吸顶区域的行为，比如设置滑动监听，实现吸顶和隐藏的切换。 4. *...
导航滚动一定高度吸顶，锚点定位
12-05
上述代码会在窗口滚动事件触发时检查滚动条位置，如果超过导航栏的高度，就将导航栏的定位改为固定，并设置其顶部距离为0，实现吸顶效果。当滚动回到导航栏上方时，恢复相对定位。 至于锚点定位自动跟随，可以监听...
jQuery购物商城导航下拉菜单
11-19
通过这样的实现方式，"jQuery购物商城导航下拉菜单"不仅能够提高用户在商城中的导航效率，还能增强网站的视觉吸引力，从而提升用户满意度和停留时间。对于开发者而言，掌握这种技术是提高网站互动性和专业性的必备...
视觉差效果和吸顶式导航栏
L_Y_J_21的博客
10-11 458
视觉差效果 1.需要引用js包 &lt;script type="text/javascript " src="js/jquery.min.js "&gt;&lt;/script&gt; &lt;script type="text/javascript " src="js/plugins.js "&gt;&lt;/script&gt; 2.写html &l
原生吸顶导航
jiao0916的博客
05-13 370
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style type="text/css"> body { padding: 0; margin: 0; } #nav { width: 100%; ...
吸顶导航（滚动一定距离后显示另一个导航）
weixin_46058007的博客
06-07 257
使用VueUse实现吸顶导航
吸顶交互导航实现
ggg21534的博客
05-30 238
当鼠标滚动到一定距离时 将它返回原位 用transition实现过渡效果。2. 吸顶导航出现前 将它上移自身高度的100% 且透明度为零 实现隐藏。
隐藏导航栏页面和不隐藏页面视差处理
aiqing711的博客
01-05 426
在需要隐藏导航栏的页面添加代码 -(void)viewWillAppear:(BOOL)animated{     [super viewWillAppear:YES];     [self.navigationController setNavigationBarHidden:YES animated:YES]; } -(void)viewWillDisappea
Vue3吸顶导航的实现
最新发布
m0_74556076的博客
05-14 403
在Layout页面中，浏览器上下滚动时，距离顶部距离大于80px吸顶导航显示，小于则隐藏。
javascript页面返回顶部吸顶效果,导航栏吸顶,缓慢返回顶部,
weixin_45789271的博客
10-31 365
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
导航吸顶效果
诸葛苍穹
09-17 2825
<html><head> <title>我的第一个 HTML 页面</title> <style> h1{height:100px;} #nav{background:red;height:40px;line-height:40px;} .fixed{position:fixed;width:100%;top:20px;}</style> <script> window.onload = funct
导航栏吸顶效果
weixin_42220039的博客
04-17 1299
html 仅实现导航吸顶效果（第一种） <div class="member_top" :class="navBarFixed == true ? 'navBarWrap' :''"> <qdd-icon class="icon-shezhi fr mr40" color="#fff" size="0.84rem"></qdd-icon> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值