Question

我正在创建这个单页网站，在第一次打开时，整个屏幕都充满了一个大图像，屏幕底部有菜单栏。

当您向下滚动时，我希望菜单滚动内容，但然后保持粘在窗口顶部，永远不会滑出顶部边缘，以便始终可以访问。

我发现很多“粘性菜单”脚本可以做一些接近它的东西，但是它们总是从页面中间某处的菜单栏开始，而不是在开始时与底部对齐的菜单。

这是一个小提琴：

我在其中使用了这个脚本： http://stickyjs.com/

像我尝试的所有其他人一样，它没有按预期工作。滚动时菜单栏无法顺畅滑动，只要您开始滚动就会跳转到页面顶部。

我认为问题在于我正在使用

position: absolute;
bottom: 0;

在菜单栏的div。

但是，当你第一次打开页面时，无论窗口大小如何，我都不知道如何实现它以坚持窗口的底部。

有什么想法吗？

Answer 1

You may add a top value and a transition in your CSS :

#menu{
  /* trigger an animation when scripts updates CSS*/
  top:calc(100% - 100px);/* cause scripts gives top:0 and erase bottom */
  transition:1s;/* your transition */
  height: 100px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #009900; 
}

修改

否则，您可以从https://www.sitepoint.com/css-position-sticky-introduction-polyfills/

激励自己

这种结果http://codepen.io/anon/pen/xgEeye

位置：固定而不是绝对，这里脚本更新：

//$(document).ready(function(){
//    $("#menu").sticky({topSpacing:0});
//  });

var menu =  document.querySelector('#menu');
var box =  document.querySelector('#screen2');
var boxPosition = box.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= boxPosition) {
        menu.style.top = '0px';
    } else {
        menu.style.top = 'calc(100% - 100px)';
    }
});

var menu =  document.querySelector('#menu');
var box =  document.querySelector('#screen2');
var boxPosition = box.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= boxPosition) {
        menu.style.top = '0px';
    } else {
        menu.style.top = 'calc(100% - 100px)';
    }
});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
#screen1 {
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
}
#menu {
  transition: 1s;
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  top: calc(100% - 100px);
  background-color: #009900;
  border-top: 2px solid #333;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
#screen2 {
  width: 100%;
  background-color: #f4452a;
  height: 1000px;
  padding-top: 200px;
  text-align: center;
}

<div id="screen1">
  screen
</div>
<div id="menu">
  THIS IS THE MENU
  <br />and I don't want to abruptly jump to the top but to gently slide to it on scroll and then stick to it
</div>
<div id="screen2">
  Rest of the page bla bla
  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />keep scrolling
</div>

一个粘性菜单栏，从底部开始，然后停留在顶部

1 个答案: