我试图让顶部导航 div (“#nav”) 仅在向上滚动时显示(使用 jQuery)。我已经让这部分工作了。 我正在努力解决的部分是我试图将“导航”向下滑动与用户向上滚动一样多(最多 100 像素)。例如。用户向上滚动 50，因此导航应向下滑动 50。 这就是我走了多远...假设我位于页面中间，滚动位置为 1000。用户执行向上滚动后，我将顶部导航的相对位置调整为 900(1000-100) -> 当前滚动位置 - 导航高度)，然后我开始向下滑动导航。我设法使用以下方法显示整个导航:
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>
最佳答案
由于您的 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 ，只需调用 scrollView('nav-2'); ，就是这样。谢谢
关于javascript - jQuery - 手动滑动顶部导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21322337/