栏从页面底部开始向上滚动然后停留在顶部

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 事件之后重新定位 ，因此会超时。还包括一些调整大小去抖动。对于组合事件，超时时间比 onload 本身绝对必要的时间长一点。

在我尝试解决 rockmanew 在 cmets 中提到的内容重叠问题之前，需要更多关于确切文档结构的信息。不想在那里浪费时间......或者在脚本上过度使用它。