当网页向上滚动时，让header固定的停留在网页的上方

最新推荐文章于 2023-05-19 10:26:16 发布

太阳的后裔

最新推荐文章于 2023-05-19 10:26:16 发布

阅读量1.8k

点赞数

分类专栏： js HTML CSS

本文链接：https://blog.csdn.net/weixin_43942765/article/details/103150236

版权

js 同时被 3 个专栏收录

60 篇文章 3 订阅

订阅专栏

HTML

16 篇文章 1 订阅

订阅专栏

CSS

16 篇文章 2 订阅

订阅专栏

想当年，小编实习时总是遇见此类问题，当时为了画页面也是苦到没话说，小编在实习时就遇见过此类的问题，没有想到小编现在又遇到了，小编只好再做一下了，但有点小傲娇的小编下次只想看自己的博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<title>滚动事件</title>
		<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
		<style>
			#img {
				position: fixed;
				width: 100%;
				height: 130px;
				background: #1E88E5;
				top: 0px;
				left: 0px;
				/* display: none; */
			}

			#box {
				width: 1000px;
				height: 1200px;
				margin: 0 auto;
				border: 1px solid red;
				overflow: hidden;
			}
		</style>
		<script>
			/*
		      $(obj).position   获取定位的位置
		      $(obj).scrollTop(0)
		      $(obj).animate({},时间)
		      $(window).scroll(function(){
		          //窗口的滚动事件
		      })；
		 
		    */
			$(function() {
				$(window).scroll(function() {
					var value = $('body,html').scrollTop();
					if (value > 130) {
						$('#img').fadeIn(130);
					} 
					//else {
						//$('#img').fadeOut(130);
					//}
				});

				$('#img').click(function() {
					$('body,html').animate({
						'scrollTop': 0
					}, 'slow')

				})
			})
		</script>
	</head>
	<body>
		<div id="box"></div>
		<!-- <img src="images/a1.png" alt="箭头"> -->
		<div id="img"></div>
	</body>
</html>

太阳的后裔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
当网页向上滚动时，让header固定的停留在网页的上方

想当年，小编实习时总是遇见此类问题，当时为了画页面也是苦到没话说，小编在实习时就遇见过此类的问题，没有想到小编现在又遇到了，小编只好再做一下了，但有点小傲娇的小编下次只想看自己的博客<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&gt...
复制链接

扫一扫