Question

我希望你很好！

关于如何清理以下代码的问题。目前，它几乎可以工作。这个想法是你可以点击右边粘滑块的任何元素，它会带你到文档中的那个位置 - 然后会出现小蓝球。你也可以滚动，小蓝球也会跟着。

问题：

当我点击我所在的标题下方的标题时，滚动效果正常，但是球不顺畅。我怎样才能让它顺利下去，而不是在每个标题上抽搐？
当我点击我所在位置上方的标题时，球只回到下面的标题我所在的位置！
动画根本不适用于底部标题“第八”。它也不适用于滚动 - 如果我滚动到底部，菜单将保持在标题“第七”。

如果你能提供帮助，我将非常感激！我的项目将在两天后完成，自周末开始工作以来，我每天晚上都要工作到凌晨4点。

HTML：

<aside>
    <div id="floating">
    <h2 id='nav-title'><a href='#fb-root'>The Guide</a></h2>
    <div id='nav-container'>
   <div id='line-container'>
      <div id='line'>

      </div>
   </div>
   <div id='nav-list'>
       <ul>
          <li ><a href="#1" id='1-cat'>First</a></li>
          <li ><a href="#2" id='2-cat'>Second</a></li>
          <li ><a href="#3" id='3-cat'>Third</a></li>
          <li ><a href="#4" id='4-cat'>Fourth</a></li>
          <li ><a href="#5" id='5-cat'>Fifth</a></li>
          <li ><a href="#6" id='6-cat'>Sixth</a></li>
          <li ><a href="#7" id='7-cat'>Seventh</a></li>
          <li ><a href="#8" id='8-cat'>Eighth</a></li>
       </ul>
       </div>
       <br style="clear:both; font-size:1px;" />
       </div>
    </div>
</aside>

<h1>The Guide</h1>
// stuff here
<h2 id="1">First</h2>
// stuff here
<h2 id="2">Second</h2>
// stuff here
<h2 id="3">Third</h2>
// stuff here
<h2 id="4">Fourth</h2>
// stuff here
<h2 id="5">Fifth</h2>
// stuff here
<h2 id="6">Sixth</h2>
// stuff here
<h2 id="7">Seventh</h2>
// stuff here
<h2 id="8">Eighth</h2>
// stuff here

JS：

$(document).ready(function() {
    $("#1-cat").attr("class", "clicked");

    $("#nav-title").click(function() {
        $("#line").animate({
            "top": "0px"
        }, "fast");
        if ($("#1-cat").attr("class") != "clicked") {
            $('#nav-list a').attr("class", "");
            $("#1-cat").attr("class", "clicked");
        }
    });


    $('#nav-list a').click(function() {
        var ltop = 40 * parseFloat($(this).attr('id')) - 40;
        var elementClicked = $(this).attr("href");
        var destination = $(elementClicked).offset().top;
        $('html,body').animate({
            scrollTop: destination + 20
        }, 600, function() {
            $("#line").animate({
                "top": ltop + "px"
            }, "fast");
            if ($(this).attr("class") != "clicked") {
                $('#nav-list a').attr("class", "");
                $(this).attr("class", "clicked");
            }
        });
    });

    $('#content h2').waypoint(function(event) {
        var $el = $(this);
        $('#nav-list a').attr('class', '');
        $('#nav-list a#' + $el.attr('id') + '-cat').attr('class', 'clicked');
        var ltop = 40 * parseFloat($('#nav-list a#' + $el.attr('id') + '-cat').attr('id')) - 40;
        $("#line").animate({
            "top": ltop + "px"
        }, "fast");
    }, {
        offset: '5px'
    });
});

奖励：我会爱能够在菜单上上下拖动球，这会使文档滚动到我将球拖到的标题。 Mega指向任何可以给我一些如何做的提示的人！

jquery菜单动画的麻烦

0 个答案: