顶部导航栏滚动样式

dae bal

已于 2023-03-24 11:54:29 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 前端遇到的问题之后的解决方法文章标签： javascript jquery css

于 2020-06-30 16:06:34 首次发布

本文链接：https://blog.csdn.net/baidu_39043816/article/details/107044446

前端同时被 3 个专栏收录

169 篇文章

订阅专栏

遇到的问题之后的解决方法

58 篇文章

订阅专栏

jquery

30 篇文章

订阅专栏

示例一：jQuery实现随屏幕滑动顶部导航栏背景色透明度变化

css

.mini{background-color: rgba(0, 0, 0, 0.5);-webkit-transition: background 1s;-o-transition: background 1s;transition: background 1s;}

<script>
	$().ready(function(){
		$(window).scroll(function(){
			var top = $(".header4").offset().top;//根据类名获取指定的位置
			var scrollTop = $(window).scrollTop();//获取当前滑动的位置
			if(scrollTop > 80){
				$(".header4").addClass("mini");
			}else{
				$(".header4").removeClass("mini");
			}

		})
	})

</script>

示例二：导航栏鼠标向上或向下滚动显示的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>导航栏鼠标向上或向下滚动显示的样式</title>
		<style>
			*{padding: 0;margin: 0;}
			#g-header {width: 100%;z-index: 99;position: fixed;top: 0;left: 0;}
			#g-header #head-wrapper {width: 100%;position: absolute;left: 0;top: 0;height: 150px;line-height: 150px;transition: all .8s;-webkit-transition: all .8s;-moz-transition: all .8s;-ms-transition: all .8s;-o-transition: all .8s;}
			#g-header #head-wrapper .header {width: 1440px;margin: 0 auto;}
			#g-header #head-wrapper .header li{float: left;padding: 0 10px;}
			
			/* 鼠标往下滑动的样式 */
			#g-header.head-fixed #head-wrapper {transform: translateY(-100%);-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%);}
			
			/* 鼠标往上滑动的样式 */
			#g-header.inDown #head-wrapper {height: 120px;line-height: 120px;background-color: rgba(0,0,0,.5);transition: all .8s;-webkit-transition: all .8s;-moz-transition: all .8s;-ms-transition: all .8s;-o-transition: all .8s;transform: translateY(0);-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);}
			
			
			@media screen and (max-width: 750px){
				#g-header #head-wrapper {
					height: 60px;
					line-height: 60px;
				}
			}
			#g-header.wapDown #head-wrapper {
			    background-color: rgba(0,0,0,.5);
			}
		</style>
	</head>
	<body>
		<div id="g-header">
			<div id="head-wrapper">
				<div class="header">
					<ul class="" style="list-style: none;">
						<li>Home</li>
						<li>News</li>
						<li>Costomer</li>
						<li>Contact Us</li>
					</ul>
				</div>
			</div>
		</div>
		<div style="height: 1500px;background-color: aliceblue;"></div>
		<script src="./jquery-3.2.1.min.js"></script>
		<script>
			var v = 0;
			$(window).scroll(function(e) {
				if (991 < window.innerWidth) {
					var t = $("#g-header");
					t.addClass("head-fixed");
					var n = $(this).scrollTop();
					if (n <= 20) return void $("#g-header").removeClass();
					if (v < n) t.hasClass("inDown") && $("#g-header").removeClass("inDown");
					else {
						if ($(document).scrollTop() <= 200) return;
						t.addClass("inDown")
					}
					v = n
				} else 10 < $(document).scrollTop() ? $("#g-header").addClass("wapDown") : $("#g-header").removeClass("wapDown")
				});
		</script>
	</body>
</html>

示例三：导航的跟随定位效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        article {
            max-width: 600px;
            margin: 1em auto;
        }

        article h4,
        article footer {
            position: -webkit-sticky;
            /* for Safari */
            position: sticky;
        }

        article h4 {
            margin: 2em 0 0;
            background-color: #333;
            color: #fff;
            padding: 10px;
            top: 0;
            z-index: 1;
        }

        article content {
            display: block;
            background-color: #ffffe0;
            position: relative;
            padding: 1px 10px;
        }

        article footer {
            background-color: #f0f3f9;
            padding: 10px;
            bottom: 50vh;
            z-index: -1;
        }
    </style>
</head>
<body>
    <article>
        <section>
            <h4>标题</h4>
            <content>
                <p>内容</p>
            </content>
            <footer>网友评论：...</footer>
        </section>
    </article>
</body>
</html>