twitter-blog-vue中部导航栏布局

wanghui 发布于2019-08-02 15:38 / 2797人阅读

摘要：接下来是中部导航栏。我们看到这里的头像动画，和中部导航栏定位都是跟鼠标滚动有关的。这里是要求在页面上部分滚动范围内，导航栏一直在的上部，随着鼠标的滚动而改变位置。而且中部导航栏下方区域的内容，在下滑的时候不能出现在这个区域。

接下来是中部导航栏。我们看到这里的头像动画，和中部导航栏定位都是跟鼠标滚动有关的。我们先将布局实现一下。这里是要求在页面上部分滚动范围内，导航栏一直在div的上部，随着鼠标的滚动而改变位置。到下部分滚动范围，导航栏就一直固定到页面的上部分。
这里需要注意两个地方

这里需要一个覆盖不了的区域，可以给人一种更好开关屏的感觉。而且中部导航栏下方区域的内容，在下滑的时候不能出现在这个区域。

一定要注意尽可能的少进行DOM操作，这样是非常影响性能的！

监听鼠标滚动事件

  private fixedFlag: boolean = false;
  private unFixedFlag: boolean = true;
  private mounted() {
    window.addEventListener("scroll", this.handleScroll);
  }
  private handleScroll() {
    const scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
    if (scrollTop > 300) {
      if (!this.fixedFlag) {
        const obj = document!.getElementById("index-menu");
        const obj2 = document!.getElementById("fake-area");
        obj!.style.position = "fixed";
        obj!.style.top = "77px";
        obj2!.style.position = "fixed";
        obj2!.style.top = "47px";
        this.fixedFlag = true;
        this.unFixedFlag = false;
      }
    } else {
      if (!this.unFixedFlag) {
        const obj = document!.getElementById("index-menu");
        const obj2 = document!.getElementById("fake-area");
        obj!.style.position = "";
        obj!.style.top = "";
        obj2!.style.position = "";
        obj2!.style.top = "";
        this.unFixedFlag = true;
        this.fixedFlag = false;
      }
    }
  }

效果展示

项目地址

https://github.com/pppercyWan...

云服务器 GPU云服务器导航栏三栏布局导航栏按钮 iOS导航栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54264.html

twitter-blog-vue中部导航栏

摘要：中部导航栏的跟头部导航栏差不多。但是需要设置一个参数。还有路由变化时菜单激活项的变化。头像的变化可以使用实现，一个大头像，和一个小头像加信息的离开进入动画。通过之前鼠标滚动监听达到效果。效果展示项目地址中部导航栏的Menu-Item跟头部导航栏差不多。但是需要设置一个default-active参数。还有路由变化时菜单激活项的变化。头像的变化可以使用transition实现，一个大头...

xavier 2019-08-02 15:38 评论0 收藏0
twitter-blog-vue头部导航栏实现

摘要：扣精灵图可以看俺的这篇文章效果展示项目地址这个头部导航主要是写一个menu-item组件，hover时底部的蓝色底边动画弹出。再将logo扣出精灵图。MenuItem： {{title}} import { Component, Vue, Watch, Prop } from vue-property-decorator; ...

yuanzhanghu 2019-08-02 15:38 评论0 收藏0
DIV+CSS规范命名大全集合

摘要：网页制作中规范使用命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体命名规则命名大全内容篇。网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容篇。常用DIV+CSS命名大全集合，即CSS命名规则 DIV CSS命名目录我们开发CSS+DIV网页（Xhtml）时候,比较困惑...

wangtdgoodluck 2019-08-30 11:20 评论0 收藏0
用vue模仿twitter写一个自己的博客

摘要：而过分依赖组件库，只会导致自己的技术越来越烂。自己一直想着写一个博客。打算模仿的一个页面。写一个自己的博客，先用将前端部分写好，后续再用或写后端部分前端目录头部导航栏实现拉幕效果中部导航栏布局实现中部导航栏模仿的页面 vue生态十分的强大，UI组件库越来越多。而过分依赖组件库，只会导致自己的技术越来越烂。组件的编写，样式的书写，动画，适配，媒体查询等很多都不记得了。自己一直想着写一个...

RichardXG 2019-08-02 15:39 评论0 收藏0
模拟a标签的hash---中部导航

摘要：主要功能固定中部导航栏滚动到触发滚动后可视内容和高亮标题一致很多网站并未做到这一点点击导航标题快速定位到内容可自定义当触发标题时的标题样式基于实现根据此网站的代码稍作修改使用方式中声明调用例如导航的类是自己文件里按自己意愿定义主要功能固定中部导航栏（滚动到触发）滚动后可视内容和高亮标题一致（很多网站并未做到这一点）点击导航标题快速定位到内容可自定义当触发标题时的标题样式...

melody_lql 2019-08-20 17:29 评论0 收藏0