个人中心
gpt4 book ai didi

javascript - jQuery - 手动滑动顶部导航

转载 作者：行者123 更新时间：2023-11-28 08:35:12 25 4
gpt4 key购买 nike

我试图让顶部导航 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/

25 4 0
文章推荐： javascript - iFrame 适用于 Chrome 但不适用于 IE/Firefxx
文章推荐： html - 水平 "Revealing"导航栏不起作用
文章推荐： html - 悬停在 Active 上的 Twitter Bootstrap 下拉菜单删除了背景
文章推荐： 用于重复闪烁效果的 CSS 关键帧(wifi)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com