PROMULGATOR

    马钧成

    上海市
    Html
    Css
    Js

    
                        


                        

                            


body {
	font-size:14px;
	line-height:30px;
	margin:0;
	line-height:30px;
	color:#000;
}
.nav {
	width:150px;
	background:#ccc;
	position:fixed;
	top:0px;
}
.nav ul,.nav ul li {
	width:100%;
	list-style-type:none;
	margin:0;
	padding:0;
}
.nav ul li a {
	text-decoration:none;
	display:block;
	color:#000;
}
.nav ul li.active {
	background-color:#333;
}
.nav ul li.active a {
	color:#fff;
}
.container {
	width:800px;
	height:500px;
	margin:0px auto;
	background:#ddd;
	border-bottom:1px solid #ccc;
	font-size:24px;
	line-height:100px;
	text-align:center;
}
.container.active {
	color:#fff;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.9.1

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
jQuery根据内容滚动位置判断对应的多个菜单高亮(原创)

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
原理说明：
利用 scrolltop() 获取滚动条距离网页顶部滚动的距离，其实就是屏幕顶端距离文档顶端的高度。
利用 offset().top 获取元素距离文档顶端的高度。获取屏幕的高度，加上 scrolltop() ，获取到屏幕底部距离文档顶端的高度。获取元素的高度，加上 offset().top ，获取元素底部距离文档顶端的高度。当 元素距离文档顶端的高度 小于 屏幕顶端距离文档顶端的高度，就表示元素头部进入了屏幕中。
当元素底部距离文档顶端的高度 大于 屏幕底端距离文档顶端的高度，就表示元素底部进入了屏幕中。根据以上两个条件，判断元素是否有部分处于屏幕中。这样，当有多个元素同时处在屏幕中时，多个元素对应的导航会同时高亮。附赠只高亮一个菜单的js代码，注释掉高亮多个菜单部分，取消只高亮一个菜单部分js的注释即可。这部分代码解决了滚动到底部时，最后一个元素对应的的菜单不会高亮的问题。

                         

                     

                   
                


                
0