顶部通栏-新浪微博效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了顶部通栏-新浪微博效果相关的知识,希望对你有一定的参考价值。

JS----------------------------------------

window.onload=function()
            {
                 var nav=document.getElementById(‘nav‘);
                var navFixed=document.getElementById(‘navFixed‘);
                
                window.onscroll=function()
                {
                     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                     document.title=scrollTop;
                     
                     if(scrollTop>nav.offsetTop)
                     {
                         navFixed.style.display=‘block‘;
                     }
                     else if(scrollTop<nav.offsetTop)
                     {
                         navFixed.style.display=‘none‘;
                     }
                 }    
            }

CSS------------------------

        <style>
            *{margin:0;padding:0;}
            .nav-wrapper-fixed{ position:fixed; top:0; width:100%;}
             .nav-wrapper-fixed .nav{width:960px; margin:0 auto;}
             .nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
             .nav-wrapper{ margin-top:100px; width:100%;}
             .nav-wrapper .nav{width:960px; margin:0 auto;}
             .nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
        </style>

html-----------------------

<body style="height:2000px;">
        <div class="nav-wrapper">
             <div class="nav" id="nav">
                 <ul>
                     <li>菜单一11</li>
                     <li>菜单二</li>
                     <li>菜单三</li>
                     <li>菜单四</li>
                     <li>菜单五</li>
                 </ul>
             </div>
         </div>
         <div class="nav-wrapper-fixed" id="navFixed" style="display:none;">
             <div class="nav" id="nav">
                 <ul>
                     <li>菜单一22</li>
                     <li>菜单二</li>
                     <li>菜单三</li>
                     <li>菜单四</li>
                     <li>菜单五</li>
                 </ul>
             </div>
         </div>
    </body>

以上是关于顶部通栏-新浪微博效果的主要内容,如果未能解决你的问题,请参考以下文章

新浪微博注册页面效果图

Android 自定义view-仿新浪微博#话题#插入EditText

登陆新浪微博

新浪微博热门评论爬虫采集

python抓取新浪微博评论并分析

新浪微博MID是啥?