[jQuery]实现导航滚动到顶部则固定的效果

向

下滚动页面时，导航上升到顶部则固定。我第一次见到这个效果是在使用Rcloud主题的时候，当时觉得比起原来固定在顶部的导航要灵活许多。
今天在翻找网页特效的时候看到了，所以就搬过来收藏了。要引用到jQuery库，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery实现的导航固定效果</title><script src="http://libs.useso.com/js/jquery/2.1.1/jquery.js"language="javascript" type="text/javascript"></script><script>
$(function(){
  $(window).scroll(function() {
	//$("body").css({"background-position":"center "+$(window).scrollTop()+""});
	if($(window).scrollTop()>=250){
		$(".nav").addClass("fixedNav");
	}else{
		$(".nav").removeClass("fixedNav");
	}
  });
});
</script>
<style>*{	margin:0px;	padding:0px;}div.nav{	background:#000000;	height:57px;	line-height:57px;	color:#ffffff;	text-align:center;	font-family:"微软雅黑", "黑体";	font-size:30px;}div.fixedNav{	position:fixed;	top:0px;	left:0px;	width:100%;	z-index:100000;	_position:absolute;	_top:expression(eval(document.documentElement.scrollTop));}</style></head><body><div class="header" style="background:#428BCA;height:250px;"></div><div class="nav"><p>向下滚动页面，本导航上到顶部则固定</p></div><div class="content" style="background:#0099FF; height:2000px;"></div></body></html>

基本上就是jQuery和一个脚本在起作用了。

TAGS: jQuery 导航导航固定

本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。

转载请注明出处链接 : https://www.inlojv.com/3528.html

[jQuery]实现导航滚动到顶部则固定的效果

相关文章