<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>置頂菜單</title>
? ? <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
? ? <script type="text/javascript">
? ? ? ? $(function(){
? ? ? ? ? ? $(window).scroll(function() {
? ? ? ? ? ? ? ? var nowTop = $(document).scrollTop();
? ? ? ? ? ? ? ? if(nowTop>200){
? ? ? ? ? ? ? ? ? ? $('.menu').css({
? ? ? ? ? ? ? ? ? ? ? ? position:'fixed',
? ? ? ? ? ? ? ? ? ? ? ? left:'50%',
? ? ? ? ? ? ? ? ? ? ? ? top:0,
? ? ? ? ? ? ? ? ? ? ? ? marginLeft:-480
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? $('.menu_pos').show();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? $('.menu').css({
? ? ? ? ? ? ? ? ? ? ? ? position:'static',? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? marginLeft:'auto'
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? $('.menu_pos').hide();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? if(nowTop>400){
? ? ? ? ? ? ? ? $('.totop').fadeIn();
? ? ? ? ? ? ? }
? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? $('.totop').fadeOut();
? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? $('.totop').click(function() {
? ? ? ? ? ? ? ? $('html,body').animate({'scrollTop':0});
? ? ? ? ? ? });
? ? ? ? })
? ? </script>
? ? <style type="text/css">
? ? ? ? body{margin:0px;}
? ? ? ? .logo_bar{
? ? ? ? ? ? width:960px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? background-color:#f0f0f0;
? ? ? ? ? ? margin:0 auto;
? ? ? ? }
? ? ? ? .menu,.menu_pos{
? ? ? ? ? ? width:960px;
? ? ? ? ? ? height:50px;
? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? background-color:gold;
? ? ? ? ? ? text-align:center;
? ? ? ? ? ? line-height:50px;
? ? ? ? }
? ? ? ? .menu_pos{
? ? ? ? ? ? display:none;
? ? ? ? }
? ? ? ? .down_con{
? ? ? ? ? ? width:960px;
? ? ? ? ? ? height:1800px;
? ? ? ? ? ? margin:0 auto;
? ? ? ? }
? ? ? ? .down_con p{
? ? ? ? ? ? margin-top:100px;
? ? ? ? ? ? text-align:center;
? ? ? ? }
? ? ? ? .totop{
? ? ? ? ? ? width:50px;
? ? ? ? ? ? height:50px;
? ? ? ? ? ? background:url(images/up.png) center center no-repeat #000;
? ? ? ? ? ? border-radius:50%;
? ? ? ? ? ? position:fixed;
? ? ? ? ? ? right:50px;
? ? ? ? ? ? bottom:50px;
? ? ? ? ? ? display:none;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="logo_bar">頂部logo</div>
? ? <div class="menu">置頂菜單</div>
? ? <div class="menu_pos"></div>
? ? <div class="down_con">
? ? ? ? <p style="color:red">網(wǎng)站主內(nèi)容</p>
? ? ? ? <p>網(wǎng)站主內(nèi)容</p>
? ? ? ? <p>網(wǎng)站主內(nèi)容</p>
? ? ? ? <p>網(wǎng)站主內(nèi)容</p>
? ? ? ? <p>網(wǎng)站主內(nèi)容</p>
? ? </div>
? ? <a href="javascript:;" class="totop"></a>
</body>
</html>
