Question

此网站上有一个过时的版本问题，但它没有回答我的问题。

我正在尝试使用Bootstrap创建一个网站，该网站有一个登录页面，其中封面图像/轮播填充整个浏览器区域，导航栏固定在底部。它不应低于视图区域，而应位于屏幕底部。此外，它应该是固定的，所以当访问者向下滚动时，导航栏会向上跟随，一旦它到达屏幕顶部，它就会卡住并向下移动。

我尝试使用affix插件，但我无法弄清楚如何用它完成上述操作。

以下是我偶然发现的网站，其中包含我要创建的布局：http://www.basabots.com/

感谢您的帮助。

Answer 1

以下是您如何做到这一点的基本示例。基础是首先在绝对位置和底部。然后你会看到窗口的滚动位置，并在滚动量高于窗口高度减去标题高度后将标题更改为固定位置和顶部。

＆＃13;

var scrollpos = window.scrollY;
var header = document.getElementById("header");
var windowheight = window.innerHeight;
var headerheight = document.getElementById("header").offsetHeight;

function add_class_on_scroll() {
  header.classList.add("fixed");
}

function remove_class_on_scroll() {
  header.classList.remove("fixed");
}

window.addEventListener('scroll', function() {
  scrollpos = window.scrollY;
  if (scrollpos > (windowheight - headerheight)) {
    add_class_on_scroll();
  } else {
    remove_class_on_scroll();
  }
});

＆＃13;

html, body {
  width: 100%;
  height: 1800px;
  margin: 0;
  padding: 0;
  background: grey;
}

#header {
  background-color: black;
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

#header h3 {
  margin: 0;
  line-height: 50px;
}

#header.fixed {
  position: fixed;
  top: 0;
}

＆＃13;

<div id="header">
  <h3>This is the header</h3>
</div>

＆＃13;

小提琴玩：https://jsfiddle.net/thepio/c686hnek/1/

Bootstrap：滚动后固定在顶部的粘性导航栏

1 个答案: