day25-Sticky Navbar（粘性的导航条）

最新推荐文章于 2023-10-09 11:59:57 发布

格式化小拓

最新推荐文章于 2023-10-09 11:59:57 发布

阅读量67

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

本文链接：https://blog.csdn.net/qq_51523316/article/details/131754731

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day25-Sticky Navbar（粘性的导航条）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky Navigation</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 导航 -->
    <nav class="nav">
        <div class="container">
            <!-- logo -->
            <h1 class="logo"><a href="/index.html">我的网站</a></h1>
            <!-- 导航栏 -->
            <ul>
                <li><a href="#" class="current">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系</a></a></li>
            </ul>
        </div>
    </nav>
    <!-- 展示 -->
    <div class="hero">
        <div class="container">
            <h1>欢迎来到我的网站</h1>
            <p>代码之旅：探索无限的数字世界</p>
        </div>
    </div>
    <!-- 内容 -->
    <section class="container content">
        <h2>段落一:</h2>
        <p>敲代码，就像踏上一场奇妙的旅程。每当我们打开编辑器，兴奋和好奇便涌上心头。键盘的击键声似乎在诉说着一个个数字的故事，而屏幕上的代码则是我们心灵的投影。

            这是一段静谧而富有表达力的旅程。代码无声地展现着我们的创意和思想，它是一种通往未知世界的钥匙，让我们能够创造出前所未有的数字奇迹。

            每一行代码都是一次探险，每一个bug都是一个挑战。我们用执着和智慧去寻找bug的源头，解决问题的方法，而每一次突破，都像是一次登顶的胜利。</p>

        <h3>段落二:</h3>
        <p>敲代码的过程中，我们学会了思考，学会了自省。每个函数、每个变量背后都有一段思想的历程，它们是我们内心世界的映射。

            代码是一门语言，它连接着不同的人，让我们在虚拟的世界中相互交流。在开源社区中，我们分享知识，交流经验，这是一种美妙的共生。

            这趟代码之旅没有终点，只有不断向前的追求。在未来的路上，我们会不断遇到新的挑战，探索更深的领域。

            敲代码，不仅是一种技能，更是一种态度。它教会我们谦卑和坚持，让我们懂得在失败中汲取经验，不断改进。

            让我们热爱代码之旅，勇敢踏上探索无限数字世界的征程。在这片代码的海洋里，让我们发现更广阔的天地，释放内心的激情，创造属于我们的数码传世</p>
    </section>

    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #222;
    padding-bottom: 50px;
}

/* 版心 */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 导航 */
.nav {
    /* 固定定位 */
    position: fixed;
    background-color: #222;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.3s ease-in-out;
}

/* 导航的子元素 */
.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    transition: all 0.3s ease-in-out;
}

/* 导航内容 */
.nav ul {
    display: flex;
    /* 去除无序列表的圆点 */
    list-style-type: none;
    align-items: center;
    justify-content: center;
}

.nav a {
    color: #fff;
    /* 去除下划线 */
    text-decoration: none;
    padding: 7px 15px;
    transition: all 0.3s ease-in-out;
}

/* 滚动鼠标滚轮时，更改导航样式 */
.nav.active {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav.active a {
    color: #000;
}

.nav.active .container {
    padding: 10px 0;
}

/* 悬浮导航和当前导航的样式 */
.nav a.current,
.nav a:hover {
    color: #c0392b;
    font-weight: bold;
}

/*  */
.hero {
    background-image: url('https://source.unsplash.com/random/1600x600');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    height: 100vh;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    z-index: -2;
}

/* 给图片添加遮罩层 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/* 标题 */
.hero h1 {
    font-size: 46px;
    margin: -20px 0 20px;
}

.hero p {
    font-size: 20px;
    letter-spacing: 1px;
}

/* 内容 */
.content h2,
.content h3 {
    font-size: 150%;
    margin: 20px 0;
}

.content p {
    color: #555;
    line-height: 30px;
    letter-spacing: 1.2px;
    /* 段落第一行缩进两个字 */
    text-indent: 2rem;
}

script.js

// 重点 flex  background transition
// 1.获取元素节点
const nav = document.querySelector('.nav')
// 2.窗口滚动事件
window.addEventListener('scroll', () => {
    if (window.scrollY > nav.offsetHeight + 150) {
        // nav变白
        nav.classList.add('active')
    } else {
        // nav恢复原样
        nav.classList.remove('active')
    }
})

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day25-Sticky Navbar（粘性的导航条）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday25-Sticky Navbar（粘性的导航条）效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&
复制链接

扫一扫

专栏目录