仿简书，知乎pc官网顶部导航栏上下滚动效果

程序员蜗牛

已于 2023-03-20 11:14:09 修改

阅读量1.6k

点赞数 5

分类专栏： vue 分享文章标签： vue js 动效

于 2019-12-13 15:22:27 首次发布

本文链接：https://blog.csdn.net/websmallrabbit/article/details/103527976

版权

描述：简书，知乎顶部导航栏，当鼠标上下滚动时切换不同导航栏，非常符合用户习惯。

怎么实现的呢
首先看一下实现的效果

先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="nav-bar-wrapper fixed">
                    <div class="content-wrapper">
                          <div class="nav-bar-fixed">
                            <div class="top-navBar" :class="{'up': isUp}">
                              <div class="nav-bar-content">
                                <div class="content-wrapper flex-sb">
                                  <h1 class="logo">
                                    <a href="" title="webrabbit博客">
                                      <img src="" alt="webrabbit博客">

最低0.47元/天解锁文章

程序员蜗牛

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
仿简书，知乎pc官网顶部导航栏上下滚动效果

描述：简书，知乎顶部导航栏，当鼠标上下滚动时切换不同导航栏，非常符合用户习惯。怎么实现的呢首先看一下实现的效果先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ......
复制链接

扫一扫