zoukankan      html  css  js  c++  java
  • 滚动菜单跟随

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动菜单跟随</title>
    	
    </head>
    <style>
    	*{margin:0;padding: 0;}
    	a{color: #000;}
    	.header{		
    		position: fixed;
    		top:0;
    		left:0;
    		right: 0;
    		background: #fff;
    	}
    	nav{		
    		 1000px;
    		margin: 0 auto;
    		height:100px;
    		line-height:100px;
    	}
    	nav li{display: inline-block;padding:0 20px;}
    
    	nav li.active a{
    		color: #22b573;
    	}
    
    	.mode{height:1000px;background: #ccc;}
    
    	.content{
    		margin-top: 100px;
    	}
    </style>
    
    <body>
    	<div class="header">
    		<nav>
    			<ul class="nav nav-tabs">
    				<li class="page-scroll">
    					<a href="#w1">wrap 1</a>
    				</li>
    				<li class="page-scroll">
    					<a href="#w2">wrap 2</a>
    				</li>
    				<li class="page-scroll">
    					<a href="#w3">wrap 3</a>
    				</li>
    				<li class="page-scroll">
    					<a href="#w4">wrap 4</a>
    				</li>
    			</ul>
    		</nav>
    	</div>
    	<div class="content">		
    		<div id="w1" class="mode">
    			w1速度快打开的
    		</div>
    
    		<div id="w2" class="mode">
    			w2速度快打开的
    		</div>
    		<div id="w3" class="mode">
    			w3速度快打开的
    		</div>
    		<div id="w4" class="mode">
    			w4速度快打开的
    		</div>
    	</div>
    </body> 
    </html>  
    
    <script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/_bootstrap.js"></script>
    <script type="text/javascript">
    	$(function(){
    		var $offset = 0;
                $offset = $(".header").height()+12;
                $('.page-scroll a').click(function(event) {
                    var $position = $($(this).attr('href')).offset().top;
                    $('html, body').stop().animate({
                        scrollTop: $position - $offset
                    }, 600);
                    event.preventDefault();
                });
            $('body').scrollspy({target: '.header', offset: $offset+2});
    	});
    </script>
    

      

  • 相关阅读:
    《需求规格说明书》的工作流程、组员分工和组员工作量比例
    电子公文传输系统 需求分析
    电子公文传输系统 团队展示
    团队作业(三)
    2.3.1测试
    缓冲区溢出漏洞实验
    cat userlist
    ls的功能
    团队作业(二)——需求分析
    C语言中的函数、数组与指针
  • 原文地址:https://www.cnblogs.com/tonnytong/p/7929314.html
Copyright © 2011-2022 走看看