javascript - 从页面底部开始，向上滚动，然后粘在顶部的栏

Question

我正在尝试重现我心中的一个想法。它将位于那些长滚动页面之一中。

导航栏将从初始屏幕的底部开始。一旦开始向下滚动，它就会以相同的节奏向上滚动，但一旦到达顶部，它就会保持固定。如果您滚动回到顶部，它会回到原来的位置。

它会是这样的:http://codepen.io/chrissp26/pen/xEAqC当您滚动时，它会固定在相同的数字标记处，然后粘在顶部，除非您向上滚动到该数字。

示例代码:

$(document).on("ready", function() {

  sortTheFooterOut();

});

function sortTheFooterOut() {

  footer = $("#footer");

  $(window).on("scroll", function() {

    if ($(window).scrollTop() > 0) {

      if (!footer.hasClass("fixed")) {
        footer.fadeOut(250, function() {

          footer.addClass("fixed").fadeIn(250);

        });
      }
    } else {
      footer.fadeOut(250, function() {

        footer.removeClass("fixed").fadeIn(250);

      });
    }

  });
}

body {
  font-family: "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
h1 {
  font-family: "Segoe UI Light", "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  color: #999;
  font-weight: normal;
  margin: 0;
}
footer {
  background: #008aca;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.fixed {
  position: fixed;
  top: 0;
  bottom: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Footer Scroll</h1>
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
<br>21
<br>22
<br>23
<br>24
<br>25
<br>26
<br>27
<br>28
<br>29
<br>30
<br>31
<br>32
<br>33
<br>34
<br>35
<br>36
<br>37
<br>38
<br>39
<br>40
<br>
<footer id="footer">Footer</footer>

Answer 1

我猜是这样的？

Demo

$(function() {

var gate = $(window),
footer = $('#footer'),
space;

gate.on('load resize', function() {

    clearTimeout(redraw);

    var redraw = setTimeout(function() {
    space = gate.height()-footer.outerHeight();
    sortTheFooterOut();
    }, 150);
})
.scroll(sortTheFooterOut);

function sortTheFooterOut() {

    var current = gate.scrollTop(),
    stuck = footer.hasClass('fixed');       

    if (current > space) {
    if (!stuck) {
    footer.addClass('fixed');
    }
    }
    else if (stuck) footer.removeClass('fixed');
}
});

添加了一项检查，以便在用户登陆具有缓存滚动位置的页面时正确应用该类。尤其是 Opera 对此很顽固 - 它在窗口 onload 事件之后重新定位，因此超时。还包括一些调整大小去抖动。对于组合事件，超时时间比单独加载所需的绝对时间要长一些。

在我尝试解决 rockmandew 在评论中提到的重叠内容问题之前，需要一些有关确切文档结构的更多信息。不想在那里浪费时间...或者在脚本编写上做得太过分。