VUE 头部菜单栏，鼠标向下隐藏，向上出现

金戈_旭日东升

于 2020-06-23 09:25:13 发布

阅读量1k

点赞数

分类专栏： VUE 前端

本文链接：https://blog.csdn.net/fang156239305/article/details/106916012

版权

本文介绍如何在Vue.js应用中创建一个响应式的头部菜单栏，该菜单栏在鼠标向下移动时隐藏，向上移动时显示。通过监听鼠标的滚动事件，结合Vue的数据绑定和方法实现这一交互效果，提升用户体验。

摘要由CSDN通过智能技术生成

       document.onmousewheel = function(e) {
          e = e || window.event;
          var wheelDelta = e.wheelDelta;
          var scrollY = $(document).scrollTop();//屏幕垂直距离
          if (scrollY>500){
            if (wheelDelta > 0) {
              $("#searcher").css('display','inherit');
              $("#searcher").css('position','fixed');
              $("#searcher").css('top','0')
              $("#searcher").css('z-index', '9');
              // $("#headsearcher").css('opacity','0.5')
              // $("#searcher").css('background','white')
              // $("#elMain").css('position','absolute')
              console.log("鼠标向上滚动");
            } else {
              $("#searcher").css("display", "none");
              $