jQuery - 手动滑动顶部导航

我想获得顶部导航div（“#nav”）只显示在向上滚动（与jQuery）。我有这部分工作。我正在努力的部分是我试图滑动的部分将用户向上滚动（最多100px）时的“导航”。例如。用户向上滚动50，所以导航应该滑动50. 这是我得到了多少......假设我处于滚动位置1000的页面中间。一旦用户执行向上滚动，我将顶部导航的相对位置调整为900（1000-100 - >当前滚动位置 - 导航高度），然后开始向下滑动导航。我设法显示使用整个导航：jQuery - 手动滑动顶部导航

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>

来源

2014-01-24 BustedSanta

制作http://jsfiddle.net的任何机会呢？ – ggdx

您是否考虑过使用位置：在用户滚过某个高度后固定在导航栏上？ – Gleno

感谢球员的所有输入。

我最终按预期（在某种程度上）得到了这个工作。此代码在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>

来源

2014-01-28 03:32:33 BustedSanta

正如你已经拥有的id你div的，那么为什么不尝试通过其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'）; ，这就是它。谢谢

来源

2014-01-24 03:58:14 Usman

jQuery - 手动滑动顶部导航

回答

相关问题