固定顶部含SlideInDown动画效果的提示框

前情提要

记录一下工作中进步的小点滴，也方便以后遇到类似的问题可供查阅和借鉴。

配置工作环境

webpack.js

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    // webpack入口文件，同目录下的index.js
    entry: {
        index: path.resolve(__dirname, 'src/index.js')
    },
    // 输出路径为dist，输出的文件为index.js
    output: {
        publicPath: '/',
        // 默认当前静态资源的路径，在html中引用不需要再写dist
        path: path.resolve(__dirname, 'dist/'),
        filename: 'index.js'
    },
    // 开发工具，方便调试
    devtool: 'source-map',
    // 本地服务器，运行服务时，将监听8899端口并自动在浏览器打开
    devServer: {
        contentBase: './',
        inline: true,
        port: 8899,
        open: 'http://localhost:8899/',
        host: '0.0.0.0'
    },
    // loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务
    // 插件的范围包括：打包优化、资源管理和注入环境变量
    // loader是针对某个文件，而plugin是针对整个打包流程
    module: {
        loaders: [
            // 将es6语法的js文件转换为浏览器可以理解的语法
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }]
            },
            // 将sass转为css
            {
                test: /\.(scss|sass)$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    }, 'sass-loader']
                })
            }
        ]
    },
    plugins: [
        // 将静态文件独立打包到css文件内
        new ExtractTextPlugin({
            filename: `common.css`
        })
    ]
}

package.json

{
  //...
  // 在命令行中输入 npm start 启动本地服务
  "scripts": {
    "start": "webpack-dev-server --color --progress --config webpack.js"
  },
  //...
}

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!-- 控制布局 使页面能够进行合适的缩放和平移 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <!-- 静态资源不需要写/dist路径 -->
    <link href="/common.css" type="text/css" rel="stylesheet" />
    <title>css animation</title>
</head>

<body>
    <!-- 为了展示效果 -->
    <div class="banner">
        <img src="https://zhanglinlin-site-1258125238.cos.ap-beijing.myqcloud.com/%E5%B0%8F%E7%8E%8B%E5%AD%90.jpg" />
    </div>
    <!-- 页面滚动会触顶固定且开始时有sliceInDown的动画效果 -->
    <div class="alert-info-wrapper">
        <div class="alert-info">
            <p>我是提示信息框，<span>嘻嘻</span></p>
        </div>
    </div>
    <!-- 为了展示效果 -->
    <ul>
        <li>
            <span>向下滚动</span>
            <img src="https://zhanglinlin-site-1258125238.cos.ap-beijing.myqcloud.com/%E5%B0%8F%E7%8E%8B%E5%AD%90.jpg" />
        </li>
        <li>
            <span>向下滚动</span>
            <img src="https://zhanglinlin-site-1258125238.cos.ap-beijing.myqcloud.com/%E5%B0%8F%E7%8E%8B%E5%AD%90.jpg" />
        </li>
        <li>
            <span>向下滚动</span>
            <img src="https://zhanglinlin-site-1258125238.cos.ap-beijing.myqcloud.com/%E5%B0%8F%E7%8E%8B%E5%AD%90.jpg" />
        </li>
        <li>
            <span>向下滚动</span>
            <img src="https://zhanglinlin-site-1258125238.cos.ap-beijing.myqcloud.com/%E5%B0%8F%E7%8E%8B%E5%AD%90.jpg" />
        </li>
        <li>
            <span>向下滚动</span>
            <img src="https://zhanglinlin-site-1258125238.cos.ap-beijing.myqcloud.com/%E5%B0%8F%E7%8E%8B%E5%AD%90.jpg" />
        </li>
    </ul>

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

</html>

固定顶部的js实现

index.js

import './index.scss';
import './alertInfo.scss';

window.addEventListener('scroll', () => {
// 获取提示框元素及滚动条的滚动高度
var alertWrapper = document.getElementsByClassName('alert-info-wrapper')[0],
    alertBox = document.getElementsByClassName('alert-info')[0],
    scrollTop = document.body.scrollTop 
                || document.documentElement.scrollTop;

    // 将滚动高度与提示框距离顶部的位移进行对比
    if (scrollTop >= alertWrapper.offsetTop) {
        // 滚动高于位移则将提示框固定在屏幕顶部
        alertBox.style.position = 'fixed';
    } else {
        // 否则，使提示框处于正常流布局中
        alertBox.style.position = 'static';
    }
})

SlideInDown的动画效果实现

alertInfo.scss

// 动画部分
@keyframes slideInDownOuter {
    // 从0%开始到100%的变化
    from {
        height: 0;
    }

    to {
        height: 50px;
    }
}

@keyframes slideInDownInner {
    10% {
        padding: 0 15px;
    }

    to {
        padding: 15px;
    }
}

.alert-info {
    width: 100%;
    height: 50px;
    // 固定顶部
    top: 0;
    // 让提示框展示在最上层
    z-index: 99;
    // 必须属性，让内部元素在展开前不至于显露出来
    overflow: hidden;
    background-color: #FFF9E7;
    // 引用动画名 动画执行完成所需的时间 动画执行的效果
    animation: slideInDownOuter .8s linear;

    p {
        padding: 15px;
        margin: 0;
        animation: slideInDownInner .8s linear;
    }

    span {
        color: #FF6700;
    }
}

新的一篇产出！~