同一页面中随滚动条变化的菜单

来源：互联网发布：淘宝流量劫持工具编辑：程序博客网时间：2024/05/21 06:16
在同一页面中，当滚动条到达中部菜单时，菜单可固定在浏览器头部导航，代码如下：
<!DOCTYPE HTML><html lang="en"><head>    <meta charset="UTF-8">    <title>随滚动条变化的菜单</title></head><style>    html,    body {        width: 100%;        margin: 0px;        height: 100%;    }    .header {        height: 80px;        text-align: center;        line-height: 80px;        background: #000;        color: #fff;    }    .banner {        height: 200px;        color: #fff;        line-height: 200px;        text-align: center;        background: #5eacef;    }    .tab-title ul {        vertical-align: middle;        font-size: 0;        -webkit-transition: width ease .8s;        transition: width ease .8s;    }    .tab-title ul li {        display: inline-block;        text-align: center;        font-size: 14px;        box-sizing: border-box;        max-width: 140px;        min-width: 12.5%;    }    .tab-title ul li.current a {        display: block;        border-bottom: 3px solid #2277da;        color: #2277da;        background: #fff;    }    .tab-title ul li a {        font-size: 14px;        color: #333;        padding: 0 10px;        height: 59px;        line-height: 59px;        display: inline-block;    }    .tab-content {        margin: 40px 0 60px;        position: relative;    }    .fixed-title {        position: fixed;        z-index: 100;        box-shadow: rgba(0, 0, 0, .22) 0 5px 10px -5px;        border-bottom: 0;        width: 100%;    }</style><body>    <div class="header">header</div>    <div class="banner" id="banner">banner</div>     <div class="tab-title" id="tab_title">        <ul>            <li class="current"><a href="#userGuide">新手指引</a></li>            <li class=""><a href="#userImg">客户案例</a></li>            <li class=""><a href="#userDefined9">产品优势</a></li>            <li class=""><a href="#featuresV2">产品功能</a></li>        </ul>    </div>        <h3 id="userGuide" class="tab-content-title">新手指引</h3>        <div class="tab-content-detail qc-wrapper">            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>        </div>        <h3  id="userImg" class="tab-content-title">客户案例</h3>        <div class="tab-content-detail qc-wrapper">            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>        </div>        <h3 id="userDefined9" class="tab-content-title">产品优势</h3>        <div class="tab-content-detail qc-wrapper">            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>        </div>        <h3 id="featuresV2" class="tab-content-title">产品功能</h3>        <div class="tab-content-detail qc-wrapper">            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>            <p>11111</p>        </div></body><script src="jquery-1.8.3.min.js"></script><script>    window.onscroll = function(e) {        var t = document.documentElement.scrollTop || document.body.scrollTop;        var banner = document.getElementById('banner');        changeTitle(t);    }    function changeTitle(t) {        var iframeTitle = document.getElementById("tab_title");        if (t >= 280) {            !hasClass(iframeTitle, 'fixed-title') && addClass(iframeTitle, 'fixed-title');            iframeTitle.style.top = '0';        } else {            hasClass(iframeTitle, 'fixed-title') && removeClass(iframeTitle, 'fixed-title');        }    }    $('#tab_title').find('li a').on('click', function(e) {        $('h3').animate({            'margin-top': '10px'        });        $('#' + $(this).attr('href').split('#')[1]).animate({            'margin-top': '100px'        }, 300);    })    function hasClass(ele, cls) {        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));    }    function addClass(ele, cls) {        if (!this.hasClass(ele, cls)) ele.className += " " + cls;    }    function removeClass(ele, cls) {        if (hasClass(ele, cls)) {            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');            ele.className = ele.className.replace(reg, ' ');        }    }</script></html>
阅读全文
0 0