HTML和 CSS学习---（9）

内容介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道， 名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引， 也借以这个平台来和大家分享一下一些很有用的学习资源。**

简介

当我们浏览网页，特别是公司主页的时候，我们会发现网页上面的菜单栏显得特别重要， 它们的特性将影响我们的视觉以及我们想从中获取各种有用的信息的体验， 下面我们介绍的第一种是，在滑动鼠标的时候背景图覆盖墙，当我们这样有序的去分配文字以及图片的时候，我们可以肩带变化的背景图片。

代码

1.上方菜单栏以及图标

html

    <div class="navbar">
        <a href="#" class="channel"><img src="1.jpg"></a>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portgolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

css

**body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 0 0 0 100px;
    box-sizing: border-box;
    transition: .5s;
}

.navbar.hide {
    transform: translateY(-100%);
    /* transition: 2s; */
}

.navbar .channel {
    position: relative;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    float: right;
    background: rgba(0, 0, 0, .5);
}

.navbar ul li {
    list-style: none;
    line-height: 80px;
    text-align: center;
}

.navbar ul li a {
    display: block;
    padding: 0 30px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
}

.navbar ul li a.active,
.navbar ul li a:hover {
    background: #fd2928;
    color: #fff;
}

这里有几个需要注意的点
1）当我们设置navbar的高度的时候，最好先调整一下图片的高度，这样的话可以保证图标网上移动的时候可以移动到完全不在屏幕内。
2）“box-sizing:border-box"主要作用就是将我们设置的高度和宽度有效化
3）”.active" 的意思是保持元素处于已经变成有效的样子，在这里是背景图片变为红色，
4）“:hover" 设置当鼠标放置到当前当前元素时。当前元素的一个变化状态

2. 添加下方文本内容

html 文件

 <section class="sec1"></section>
    <section class="sec2">
        <h1>Show header on Scroll Up , Hide on Scroll down</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime cum sequi magnam suscipit nobis quibusdam molestiae nihil accusamus minus alias voluptates molestias neque atque consectetur, ullam dolore consequatur aliquam iusto. Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Maxime cum sequi magnam suscipit nobis quibusdam molestiae nihil accusamus minus alias voluptates molestias neque atque consectetur, ullam dolore consequatur aliquam iusto. Lorem ipsum dolor sit amet
        </p>
    </section>
    <section class="sec3"></section>
    <section class="sec2">
        <h1>Show header on Scroll Up , Hide on Scroll down</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime cum sequi magnam suscipit nobis quibusdam molestiae nihil accusamus minus alias voluptates molestias neque atque consectetur, ullam dolore consequatur aliquam iusto. Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Maxime cum sequi magnam suscipit nobis quibusdam molestiae nihil accusamus minus alias voluptates molestias neque atque consectetur, ullam dolore consequatur aliquam iusto. Lorem ipsum dolor sit amet
            consectetur adipisicing elit. Maxime cum sequi magnam suscipit nobis quibusdam molestiae nihil accusamus minus alias voluptates molestias neque atque consectetur, ullam dolore consequatur aliquam iusto. Lorem ipsum dolor sit amet consectetur
        </p>
    </section>
    <section class="sec4"></section>

css文件

section {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

section.sec1 {
    background: url(2.jpg);
    background-size: contain;
    background-attachment: fixed;
}

section.sec2 {
    padding: 100px;
    margin: auto;
}

section.sec2 h1 {
    margin: 0;
    padding: 0;
    font-size: 60px;
    color: #262626;
}

section.sec2 p {
    font-size: 18px;
    ;
}

section.sec3 {
    background: url(3.jpg);
    background-size: contain;
    background-attachment: fixed;
}

section.sec4 {
    background: url(4.jpg);
    background-size: contain;
    background-attachment: fixed;
}

这里的background-size主要是设置图片在当前背景墙的一个覆盖状态， contain主要考虑的是图片的完全显示于当pan前屏幕中，就算旁边有空白处， cover说的是总是考虑整个图片覆盖整个容器，auto是显示img实际的size。background-attachment 主要设置背景图片在scroll down的行为， scroll 就是普通scroll。 fixed是对于viewpoint不变的背景图片，local是在八container和viewpoint 里scroll那个image.

3. 添加javascript

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        var zero = 0;
        $(document).ready(function() {
            $(window).on('scroll', function() {
                $('.navbar').toggleClass('hide', $(window).scrollTop() > zero);
                zero = $(window).scrollTop();
            })
        })
    </script>

简单解释一下原理就是，首先初始zero=0，也就是最顶上， 接着通过调用scrollTop()函数计算，是否向下滑动，如果已经离开顶部0，则激活hide的class， 向下的影藏功能就完成了， 如果需要同时实现向上恢复非隐藏状态， 那么就需要以当前的位置为储存变量， 通过这个变量来得知我们是向上滑动还是向下滑动，而不是仅仅依靠0顶点来判断已经向下滑动。

今天的分享结束啦， 希望大家喜欢：）