我试图让顶部导航div（“#nav”）仅在向上滚动时显示（使用jQuery）。我有这部分工作。 我正在努力的部分是我试图滑动用户向上滚动“导航”的位置（最多100px）。例如。用户向上滚动50，因此导航器应该向下滑动50。 这是我得到了多远...让我说我在页面中间的滚动位置1000.一旦用户执行向上滚动，我将顶部导航的相对位置调整为900（1000-100 - ＆gt;当前滚动位置 - 导航高度）然后我开始向下滑动导航。我设法使用：
显示整个导航var st = $(window).scrollTop();
$("#nav-wrapper").css('top', st-100);
$("#nav-wrapper").stop().animate({top: st })
我认为所需的结果需要与用户向上滚动的数量相关联。我可以使用一些代码帮助。 任何提示将不胜感激。
提前致谢。
这是我的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
body{
padding: 0;
margin: 0;
color: #fff;
font-family: monospace;
font-size: 20px;
background: radial-gradient(#DC4D53, #B40E0E);
}
#nav-wrapper{
width: 100%;
background: #333;
z-index: 5;
height: 100px;
position: relative; top: 0;
}
#nav{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#nav-logo,
#nav-menu {
margin-top: 10px;
margin-bottom: 10px;
float: left;
width: 50%;
}
#nav-logo{
}
#nav-menu{
margin-top: 35px;
}
#ham-menu{
float: right;
margin-right: 200px;
}
#content-wrapper{
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #fff;
padding-bottom: 10px;
overflow: hidden;
}
#item1,
#item2,
#item3 {
height: 5px;
width: 35px;
margin-bottom: 5px;
}
#ham-menu{
display: block;
width: 35px;
height: 25px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// SCROLLING DOWN
// do nothing - dont show nav on scroll down
} else {
// SCROLLING UP
var slideDownFrom = st-100;
$("#nav-wrapper").css('top', slideDownFrom);
// slide in the bar (animation effect)
$("#nav-wrapper").stop().animate({top: st })
} // else
// print current | last positions
$("#current").text("st: " + st + " | "+ lastScrollTop);
lastScrollTop = st;
}); // scroll()
}); // docready
</script>
</head>
<body style="">
<div id="nav-wrapper">
<div id="current" style="position: fixed; top: 0px;">position</div>
<div id="nav">
<div id="nav-logo">
<img src="images/logo.png" alt="logo">
</div>
<div id="nav-menu">
<div id="ham-menu">
<div id="item1"><img src="images/ham-slide-active.png" alt="slide"></div>
<div id="item2"><img src="images/ham-slide-active.png" alt="slide"></div>
<div id="item3"><img src="images/ham-slide-active.png" alt="slide"></div>
</div>
</div>
</div><!-- nav -->
<div style="clear:both"></div>
</div><!-- nav-wrapper -->
<div id="content-wrapper">
<h3>Home</h3>
1) sample<br> 2) sample<br>3) sample<br>4) sample<br>5) sample<br>
6) sample<br>7) sample<br>8) sample<br>9) sample<br>10) sample<br>11) sample<br>12) sample<br>13) sample<br>
14) sample<br>15) sample<br>16) sample<br>17) sample<br>18) sample<br>19) sample<br>20) sample<br>21) sample<br>
22) sample<br>23) sample<br>24) sample<br>25) sample<br>26) sample<br>27) sample<br>28) sample<br>29) sample<br>
30) sample<br>31) sample<br>32) sample<br>33) sample<br>34) sample<br>35) sample<br>36) sample<br>37) sample<br>
38) sample<br>39) sample<br>40) sample<br>41) sample<br>42) sample<br>43) sample<br>44) sample<br>45) sample<br>
46) sample<br>47) sample<br>48) sample<br>49) sample<br>50) sample<br>51) sample<br>52) sample<br>53) sample<br>
54) sample<br>55) sample<br>56) sample<br>57) sample<br>58) sample<br>59) sample<br>60) sample<br>61) sample<br>
62) sample<br>63) sample<br>64) sample<br>65) sample<br>66) sample<br>67) sample<br>68) sample<br>69) sample<br>
70) sample<br>71) sample<br>72) sample<br>73) sample<br>74) sample<br>75) sample<br>76) sample<br>77) sample<br>
78) sample<br>79) sample<br>80) sample<br>81) sample<br>82) sample<br>83) sample<br>84) sample<br>85) sample<br>
86) sample<br>87) sample<br>88) sample<br>89) sample<br>90) sample<br>91) sample<br>92) sample<br>93) sample<br>
94) sample<br>95) sample<br>96) sample<br>97) sample<br>98) sample<br>99) sample<br>100) sample<br>101) sample<br>
102) sample<br>103) sample<br>104) sample<br>105) sample<br>106) sample<br>107) sample<br>108) sample<br>109) sample<br>
110) sample<br>111) sample<br>112) sample<br>113) sample<br>114) sample<br>115) sample<br>116) sample<br>117) sample<br>
118) sample<br>119) sample<br>120) sample<br>121) sample<br>122) sample<br>123) sample<br>124) sample<br>125) sample<br>
126) sample<br>127) sample<br>128) sample<br>129) sample<br>130) sample<br>131) sample<br>132) sample<br>133) sample<br>
134) sample<br>135) sample<br>136) sample<br>137) sample<br>138) sample<br>139) sample<br>140) sample<br>141) sample<br>
142) sample<br>143) sample<br>144) sample<br>145) sample<br>146) sample<br>147) sample<br>148) sample<br>149) sample<br>
150) sample<br>
</div><!-- content-wrapper -->
</body></html>
答案 0 :(得分：0)
因为你已经拥有了你的div的id，所以为什么不尝试通过它的id滚动到特定的div。我在这里解释过：http://usmansidea.blogspot.com/2013/07/jquery-make-html-pages-scroll-able.html
您需要做的是将以下函数放在$ .document.ready（function（）{}）中;
function scrolView(i) {
$('div').each(function () {
if (($(this).attr('id'))==i) {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
}
});
}
当你想滚动到某个特定的div时，可以说它的id是＃nav-2，只需调用scrolView（'nav-2'）; ，就是这样。感谢
答案 1 :(得分：0)
感谢大家的所有投入。
我最终按预期工作（在某种程度上）。此代码在Chrome和Firefox中完美运行，但导航栏在IE 11中保持“跳跃”（有一点滞后），并且在移动设备上表现不佳。因此，任何性能改进技巧都将受到赞赏。
以下是在线实际页面：http://dev.vlcek.me/sample6m.html
这是我的代码：
<script type="text/javascript">
$(document).ready(function() {
var lastScrollTop = 0;
var curr = 0;
var scrollingDown = 0;
var scrollingUp = 0;
$(window).scroll(function(event){
curr = $(this).scrollTop();
if (lastScrollTop < curr){
// SCROLLING DOWN
$("#status").text('DOWN');
scrollingDown = curr;
$("#scrollingDown").text("Down: " + scrollingDown);
//$("#curr").text('curr: ' + curr);
} else{
// SCROLLING UP
$("#status").text('UP');
$("#nav-wrapper").css('position', 'relative');
$("#nav-wrapper").css('top', curr - 100);
diff = scrollingDown - curr;
if (diff <= 100){
$("#diff").text("diff (100): " + diff);
$("#nav-wrapper").css('top', (curr - 100) + diff );
}else{
$("#diff").text("diff: " + diff);
$("#nav-wrapper").css('top', curr );
}
}
lastScrollTop = curr;
$("#curr").text('curr: ' + curr);
}); // scroll()
}); // docready
</script>