网页开发（2）**动态导航栏“

设计一个导航栏，使其具有两个动态功能：

   •  能够随着页面滚动而保持在界面上

   • 能够对鼠标悬停进行反应

首先在html文件中用容器和标签写一个导航栏：

<div class="navigationBar" id="navigationBar">
        <span class="maintext0"></span>
        <li1>
            <span class="maintext">VR游览</span>
        </li1>
        <li1>
                <span class="maintext">图片欣赏</span>
        </li1>
        <li1>
            <span class="maintext">村子简介</span>
        </li1>
        <li1>
                <span class="maintext">网站首页</span>
        </li1>
    </div>

在.css文件中给其增加格式：

.navigationBar,
li1 {
    padding: 0;
    margin: 0;
}
.navigationBar {
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0;
    height: 130px;
}
.maintext0 {
    position: absolute;
    background: #F1E3D7;
    width: 50%;
    top: 60px;
    height: 60px;
    right: 5%;
    border-bottom: 10px solid #B38E7C;
    border-radius: 10px;
    overflow: hidden;
}

.maintext {
    position: absolute;
    background: #B38E7C;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0;
    bottom: 0;
    color: aliceblue;
    text-align: center;
    font-size: 20px;
    line-height: 100px;
}

得到的效果：

此时的导航栏是静态的。

**滚动时保持**

 

在对应的.js文件中增加：

window.addEventListener('load', function () {
    let navigationBar = document.getElementById('navigationBar');
    let height = navigationBar.offsetHeight;
})//获取导航栏的高度
window.addEventListener('scroll', function () {
    let value = document.documentElement.scrollTop;
    if (value > 80) //滚动条的高度（向下滚动）大于80时，固定在界面上
    {
        navigationBar.style.position = 'fixed';
        navigationBar.style.right = '0px';
        navigationBar.style.top = '-80px';
    }
    else //否则，导航栏的位置为绝对定位
    {
        navigationBar.style.position = 'absolute';
        navigationBar.style.right = '0px';
        navigationBar.style.top = '0px';
    }
})//导航栏的滚动效果

效果：

**鼠标悬停**

在对应.css文件中增加：

/*当鼠标悬停在li1上时，li1的样式发生变化*/
li1:hover {
    transform: translateY(20px);
}

li1:hover .maintext {
    background-color: #E6D1C0;
}

效果：