时间戳

首页 > 解决方案 > 如何沿页面浮动侧导航

css - 如何沿页面浮动侧导航

问题描述

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

.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组件使用角度材质来显示内容。我希望它在滚动时浮动。

有没有办法做到这一点？

标签： cssangular

解决方案

如果我没看错，您希望导航位于栏的左侧并在滚动时出现。您可以使用 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>

推荐阅读