jQuery悬浮菜单

最新推荐文章于 2022-11-10 12:31:03 发布

小歘欻

最新推荐文章于 2022-11-10 12:31:03 发布

阅读量709

点赞数

分类专栏： HTML 文章标签： html5 css jquery javascript

本文链接：https://blog.youkuaiyun.com/qq_33840688/article/details/118972359

版权

这篇博客介绍了如何使用jQuery，结合HTML5和CSS，根据页面滚动距离动态实现菜单的悬浮效果。当页面滚动到一定位置时，菜单会被固定在页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script>
			/*
			页面可视高度
			console.log($(window).height())
			console.log($(window).width())
			
			文档高度
			$(document).width()
			*/
		   $(function(){
			   var $div1 = $('.hideT')
			   var $po = $('.toptop')
				$(window).scroll(function(){
					var $scrH = $(window).scrollTop()
					if($scrH >= 300){
						$('ul').css({
							'position':'fixed',
							'left':'50%',
							'top':0,
							'margin-left':-250
						})
						$po.fadeIn()
						$div1.show()
					}
					// position设为static使滚动回来时停在原处
					else{
						$('ul').css({
							'position':'static',
							'margin-left'

最低0.47元/天解锁文章