我正在尝试重现我心中的想法。它将在其中一个长滚动页面中。
导航栏将从初始屏幕的底部开始。一旦你开始向下滚动,它会以相同的节奏向上滚动,但一旦到达顶部,它就会保持固定。如果向后滚动到顶部,它会回到原始位置。
这将是这样的: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>
答案 0 :(得分:2)
我想是这样的事情吗?
$(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在评论中提到的重叠内容问题之前,需要更多关于确切文档结构的信息。不想在那里浪费时间......或者在脚本上过度。