js常用项目——小米导航条项目

最新推荐文章于 2022-04-05 22:16:35 发布

原创最新推荐文章于 2022-04-05 22:16:35 发布 · 534 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #html

Web设计专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍了如何利用CSS技术实现小米网站风格的导航条。通过细致的样式设置，包括颜色、布局和动态效果，创建出专业且美观的导航菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>

    <div class="nav-bar" id="fixed">
        <div class="container">
            <h2 class="proj-name">2号</h2>
            <div class="right">
                <a href="" class="cur">概述</a>
                <span class="separator">|</span>
                <a href="">参数</a>
                <span class="separator">|</span>
                <a href="">图集</a>
                <span class="separator">|</span>
                <a href="">F码通道</a>
                <span class="separator">|</span>
                <a href="">用户评价</a>
                <a href="" class="buy-now">立即购买</a>
            </div>
        </div>
    </div>


    <div class="nav-bar" id="static">
        <div class="container">
            <h2 class="proj-name">1号</h2>
            <div class="right">
                <a href="" class="cur">概述</a>
                <span class="separator">|</span>
                <a href="">参数</a>
                <span class="separator">|</span>
                <a href="">图集</a>
                <span class="separator">|</span>
                <a href="">F码通道</a>
                <span class="separator">|</span>
                <a href="">用户评价</a>
                <a href="" class="buy-now">立即购买</a>
            </div>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <script>

        var fixedbar = document.getElementById('fixed');
        var staticbar = document.getElementById('static');
        var y = staticbar.offsetHeight + staticbar.offsetTop;

        var show = function()
        {
            fixedbar.classList.add('active');
        }
        var hidd = function()
        {
            fixedbar.classList.remove('active');
        }

        var position = 0;
        var timer = window.setInterval(function()
        {
            position += 1;
            if(position <= staticbar.offsetTop)
            {
                window.scrollTo(0, position);
            }
            else 
            {
                clearInterval();
            }
        }, 1);

        window.addEventListener('scroll', function()
        {
            if(window.scrollY > y)
            {
                show();
            }
            else 
            {
                hidd();
            }
        })
    </script>

</body>
</html>

css

*
{
    margin: 0px;
    padding: 0px;
}
body
{
    color: #212121;
}
.nav-bar
{
    margin-top: 140px;
    width: 100%;
    background-color: white;
    height: 63px;
    border: solid 1px rgba(224,224,224);
    border-left: 0px;
    border-right: 0px;
}
.nav-bar .container
{
    width: 1226px;
    height: 60px;
    background-color: white;
    margin: 0px auto;
}
.nav-bar .container .proj-name
{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    font-weight: 400;
}
.nav-bar .container .right
{
    display: inline-block;
    float: right;
    height: 30px;
    margin-top: 17px;
}
.nav-bar .container .right .separator
{
    color: #e0e0e0;
    font-size: 14px;
    margin: 0px 3.5px;
    line-height: 21px;

}
.nav-bar .container .right a:not(.buy-now)
{
    color: #616161;
    font-size: 14px;
    line-height: 21px;
    text-decoration: none;
}
.nav-bar .container .right a:hover
{
    color: #ff6700;
}
.nav-bar .container .right .cur
{
    color: #ff6700 !important; 
}
.nav-bar .container .right .buy-now
{
    width: 118px;
    height: 28px;
    display: inline-block;
    border: solid 1px rgba(255,103,0);
    background-color: rgba(255,103,0);
    color: white;
    text-align: center;
    line-height: 28px;
    text-decoration: none;
    font-size: 12px;
    margin-left: 5px;
    transition: all .3s;
}
.nav-bar .container .right .buy-now:hover
{
    background-color: #f25807;
    border-color: #f25807;
    color: white;
}
#fixed
{
    margin: 0px;
    position: fixed;
    top: -64px;
    transition: all .3s linear;
}
#fixed.active
{
    top: 0px;
}