如何沿页面浮动侧导航答案

【问题标题】：How to float side nav along the page如何沿页面浮动侧导航
【发布时间】：2020-08-14 05:27:48
【问题描述】：

我希望每当我向下浏览页面时，侧边导航都会向左浮动。我试图使用粘性属性来实现它。但它不起作用。请参阅代码供您参考

.sticky-class {
  position: sticky;
  top: 30px;
}

我的 html 快照是

<div class="side-nav" fxFlex="80" fxLayout="row" fxLayoutGap="1px">
    <div fxFlex="15">
      <div class="sticky-class">
        <app-sidenav></app-sidenav>
      </div>
    </div>
<div>

app-sidenav 组件正在使用角度材质来显示内容。我希望它在滚动时浮动。

有没有办法做到这一点？

【问题讨论】：

如果我没看错，您希望nav 位于栏的左侧并留在那里。您可以通过使用 CSS float: left; 将栏放在左侧来完成此操作。
如果我也向下滚动，我希望导航栏在那里。我希望它永远存在。向下滚动一点后，它应该位于某个位置。
我建议使用position: fixed;。这样即使向下滚动，导航栏也会保持不变。

标签： css angular

【解决方案1】：

如果我没看错，您希望导航位于栏的左侧并在滚动时出现。您可以使用 JavaScript 来执行此操作：

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  var nav = document.getElementById("nav");
  if (prevScrollpos > currentScrollPos) {
    nav.style.display = "none";
  } else {
    nav.style.display = "block";
  }
  prevScrollpos = currentScrollPos;
};

#nav {
  float: left;
  position: fixed;
  top: 25%;
  display: none;
  background: lightblue;
  height: 50%;
  width: 30%;
}
#home {
  margin-top: 75%;
  margin-left: 25%;
}

<p>A p element!</p>
<h1>An h1!</h1>
<h2>Hurray! h2 time!</h2>
<h3>h3...yay!</h3>
<h4>Awesome!</h4>
<h5>So small...</h5>
<h6>I'm tiny!</h6>
<br>
<div>I'm a div!</div>
<span>I'm a span!</span>
<img src=""> this is an img!
<nav id="nav">
  <button id="home">Home</button>
</nav>

【讨论】：

position: fixed; 将使元素始终固定在屏幕上。但是在滚动一点之后他需要它。所以它不会起作用。