Question

如果你看一下网站：

http://eyeheartworld.org/pages/the-cause

向下滚动，我在codepen上找到了一个概念的实现（当你向下滚动时，导航栏滚动并固定）

    var header = $("#guide-template");
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
       if (scroll >= window.innerHeight) {
          header.addClass("fixed");
        } else {
          header.removeClass("fixed");
        }
});

（http://codepen.io/simpleminded/pen/noaJj）我只想快速浏览一下首页上的PICTURES是如何工作的。它们滚动到顶部然后保持固定，而其他图片滚动它们。

Answer 1

这是将position: fixed;添加到HTML内容顶部的块的简单案例。这是一个非常基本的例子：

body{
    margin: 0;
    padding: 0;
}
#top-bar{
    height: 40px;
    width: 100%;
    background-color: #000000;
    color: #FFFFFF;
    position: fixed;
}
#content{
    height: 3000px;
    padding-top: 40px;
}

<!DOCTYPE HTML>
<html>
<head></head>
<body>
  <div id="top-bar"></div>
  <div id="content">
    AAA<br />
    BBB<br />
    CCC<br />
    DDD<br />
    EEE<br />
    FFF<br />
    XXX<br />
    YYY<br />
  </div>
</body>
</html>

Answer 2

它基本上使用window.innerHeight查找屏幕的高度，并在滚动的金额大于屏幕高度时添加一个类。

这与#introscreen的高度相同，使用css设置为100vh。 100vh基本上与100％（More on VH here）相同。

所以＆＃39;导航栏＆＃39;总是低于用户＆＃39;屏幕，一旦你滚动这个确切的数量，它就会增加“固定的”类别。它将导航栏固定到屏幕上。如果您向后滚动，则会再次删除该类。

如何实现滚动到固定效果？

2 个答案: