从页面底部开始的栏,向上滚动然后粘到顶部

时间:2015-09-25 19:16:51

标签: javascript jquery html css

我正在尝试重现我心中的想法。它将在其中一个长滚动页面中。

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

这将是这样的: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>

1 个答案:

答案 0 :(得分:2)

我想是这样的事情吗?

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事件之后重新定位,因此超时。还包括一些resize debouncing。对于组合事件,超时比onload本身的绝对必要时间长。

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