Question

当我的鼠标进入文档底部时，我试图弄清Medium如何让他们的底部操作/菜单栏向上滑动。通过将鼠标移动到不可见的div上（它通过变换translateY向上和向下滑动）不会触发上滑效果。

此外，菜单栏的高度仅为44px，但在鼠标靠近它之前，它的可见类会被触发 - 但是通过什么？使用Inspect Element时，我看不到任何可能触发它的隐藏div。

我搜索过无数种方式，例如：＆＃34;当鼠标进入文档的特定部分时显示元素＆＃34;但所有搜索结果都涉及当鼠标进入或移动div元素时，这不是我正在寻找的解决方案。

显然，你可以通过将滑动菜单放在隐藏的容器中来解决这个问题，就像我在这里完成的那样，然后你得到了想要的结果：

＆＃13;

(function() {

  var actionBar = document.querySelector('.action-bar');
  var actionBarWrapper = document.querySelector('.action-bar-detection');

  function showDiv() {
    actionBar.classList.add('js-is-visible')
  }

  function hideDiv() {
    actionBar.classList.remove('js-is-visible')
  }

  actionBarWrapper.onmouseover = showDiv;
  actionBarWrapper.onmouseout = hideDiv;

})();

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
}

body {
  height: 100%;
}

.wrapper {
  width: 90%;
  max-width: 600px;
  margin: 5% auto;
}

.action-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 1px solid #252321;
  background: #fff;
  padding: 16px;
  width: 100%;
  min-height: 50px;
  opacity: 0;
  transform: translateY(100%);
  transition: all .5s;
  z-index: 99;
}

.action-bar-detection {
  height: 150px;
  width: 100%;
  opacity: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.js-is-visible {
  opacity: 1;
  transform: translateY(0%);
}

＆＃13;

<html>

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>

  <div class="wrapper">

    <p>When mouse enters the hidden action bar element, slides up.</p>
    <p>But it's only happening because the action-bar is inside an invisible detection layer class (action-bar-detection) with a height of 150px.</p>

  </div>
  <div class="action-bar-detection">
    <div class="action-bar">

      Bottom Menu
    </div>
  </div>

</body>

</html>

＆＃13;

但是，这似乎不是Medium所做的，如果可以在不添加更多HTML＆amp; CSS，我想学习如何！： - ）

我认为我没有正确地解决问题，因为我无法找到任何解决方案，即使是远程关闭（我已经搜索了很多）。

有什么建议吗？我应该读些什么？： - ）

Answer 1

你可以通过听取文件上的mousemove事件来做到这一点，你会想要投入精力来制作这种性能，因为它会经常被触发。规范此类事件的最常见方式是throttling。

一旦你被迷上了mousemove事件，你将需要获得光标的Y坐标并将其与窗口的高度进行比较，如果它在一个阈值之内，那么你可以显示你的面板，一旦它移出你可以继续隐藏它。

以下示例显示了基本实现jsFiddle

＆＃13;

// Using underscore for the throttle function though you can implement your own if you wish
document.addEventListener('mousemove', _.throttle(mouseMoveEventAction, 200));

function mouseMoveEventAction(e) {
	doPanelStuff(isInsideThreshold(e.clientY));
}

function doPanelStuff(isActive) {
	var panelElement = document.querySelector('.panel');
  if (isActive) {
  	panelElement.style.background = 'red';
  } else {
  	panelElement.style.removeProperty('background');
  }
}

function isInsideThreshold(cursorY) {
	var threshold = 200;
	var clientHeight = document.documentElement.clientHeight;
  return cursorY > (clientHeight - threshold);
}

＆＃13;

html, body {
  height: 100%;
}

.container, .content {
  height: 100%;
  width: 100%;
}

.panel {
  height: 50px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: green;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="container">
  <div class="content"></div>
  <div class="panel"></div>
</div>

＆＃13;

Answer 2

获取视口高度，跟踪onmousemove，并将鼠标事件中的clientY与视口高度进行比较：

＆＃13;

(function() {

  var actionBar = document.querySelector('.action-bar');
  var viewHeight = window.innerHeight - 150;

  function toggleDiv(e) {
    if (e.clientY >= viewHeight) {
      actionBar.classList.add('js-is-visible');
    } else {
      actionBar.classList.remove('js-is-visible');
    }
  }

  window.onmousemove = toggleDiv;

})();

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
}
body {
  height: 100%;
}
.wrapper {
  width: 90%;
  max-width: 600px;
  margin: 5% auto;
}
.action-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  border: 1px solid #252321;
  background: #fff;
  padding: 16px;
  width: 100%;
  min-height: 50px;
  opacity: 0;
  transform: translateY(100%);
  transition: all .5s;
  z-index: 99;
}
.action-bar-detection {
  height: 150px;
  width: 100%;
  opacity: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.js-is-visible {
  opacity: 1;
  transform: translateY(0%);
}

＆＃13;

<div class="wrapper">
  <p>When mouse comes within 150px of the bottom part of the screen, the bar slides up.</p>
  <p>When the mouse leaves this defined area of the screen, the bar slides down.</p>
</div>
<div class="action-bar-detection">
  <div class="action-bar">
    Bottom Menu
  </div>
</div>

＆＃13;

当鼠标进入文档的特定区域（非Div元素）时检测

2 个答案: