Jquery固定Div在页面顶部

最新推荐文章于 2022-04-08 09:05:22 发布

原创最新推荐文章于 2022-04-08 09:05:22 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #CSS #HTML #ViewUI

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用HTML、CSS及jQuery实现一个固定在顶部的导航栏，并具备滚动时透明度变化的效果。通过简单的代码示例，展示了如何设置导航栏的位置、样式以及交互逻辑。

html:

<div id="uberbar">
	<a href="#top">Top of Page</a>
	<a href="#bottom">Bottom of Page</a>
</div>

CSS:

#uberbar	{ 
	border-bottom:1px solid #eb7429; 
	background:#fc9453; 
	padding:10px 20px; 
	position:fixed; 
	top:0; 
	left:0; 
	z-index:2000; 
	width:100%;
}

Jquery JavaScript:

$(document).ready(function() {
	(function() {
		//settings
		var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
		var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
		var inside = false;
		//do
		$(window).scroll(function() {
			position = $(window).scrollTop();
			if(position > topDistance && !inside) {
				//add events
				topbarML();
				$('#uberbar').bind('mouseenter',topbarME);
				$('#uberbar').bind('mouseleave',topbarML);
				inside = true;
			}
			else if (position < topDistance){
				topbarME();
				$('#uberbar').unbind('mouseenter',topbarME);
				$('#uberbar').unbind('mouseleave',topbarML);
				inside = false;
			}
		});
	})();
});