Navigation 如何正确格式化waypoints jquery，以便在没有内容的情况下进行粘性导航'；跳跃'；？

下面是html和脚本。解决了如何使粘性导航标题正常工作的问题，但是当我试图将if/else语句合并到脚本中以防止内容在通过航路点后“跳转”时，问题出现了

     <div id="wrapper2">
        <!-- Header -->  
        <div id="top_header"></div> 
             <div id="header_nav">
                 <div id="header">
                <a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
                    <img class="logo" src="{$img_dir}DOMS4SQRwht.png?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />
                </a>
                    <div id="header_right">
                    {$HOOK_TOP}
                    </div> 
                 </div>
             </div>

        <script type="text/javascript" src="{$js_dir}jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="{$js_dir}waypoints.min.js"></script>
        <script type="text/javascript">

        $(document).ready(function() {
            $('.top').addClass('hidden');
            $.waypoints.settings.scrollThrottle = 30;
            $('#wrapper2').waypoint(function(event, direction) {
                $('.top').toggleClass('hidden', direction === "up");
            }, {
                offset: '-100%'
            }).find('#header_nav').waypoint(function(event, direction) {
                $(this).parent().toggleClass('sticky', direction === "down");
                event.stopPropagation();
        if (direction == 'down')
          nav_container.css({ 'height':nav.outerHeight() });
        else
          nav_container.css({ 'height':'100%' });

            });
        });

        </script>

    Here's the CSS

        div#header {width:100%;margin-left:auto;margin-right:auto;height:49px;border-bottom:2px solid #ffffff;no-repeat;zoom:1;z-index:9999;background: url(../img/bg_meshdot.png)rgba(255,255,255,0.2);background-repeat:repeat;display:inline-block;}
        .sticky #header_nav {width:100%;position: fixed;top:0;margin-top:0;margin-bottom:0;box-shadow:0 0 7px rgba(0,0,0,.5);z-index:9;}
        div#top_header {width:100%;height:51px;display:inline-block;background: url(../img/bg_meshdot.png)rgba(255,255,255,0.2);position:relative;}

{$HOOK_TOP}
$（文档）.ready（函数（）{
$（'.top'）.addClass（'hidden'）；
$.waypoints.settings.scrollThrottle=30；
$（'#wrapper2'）。航路点（功能（事件、方向）{
$（'.top'）.toggleClass（'hidden'，direction==“up”）；
}, {
偏移量：'-100%'
}).find（'#header_nav'）。航路点（功能（事件、方向）{
$（this.parent（）.toggleClass（'sticky'，direction==“down”）；
event.stopPropagation（）；
如果（方向==“向下”）
css（{'height'：nav.outerHeight（）}）；
其他的
css（{'height'：'100%}）；
});
});
这是CSS
div#header{width:100%；左边距：自动；右边距：自动；高度：49px；边框底部：2px实心#ffffff；无重复；缩放：1；z索引：9999；背景：url（../img/bg_meshdot.png）rgba（255255,0.2）；背景重复：重复；显示：内联块；}
.sticky#header_nav{宽度：100%；位置：固定；顶部：0；页边距顶部：0；页边距底部：0；框阴影：0 0 7px rgba（0,0,0,5）；z索引：9；}
div#top_标题{宽度：100%；高度：51px；显示：内联块；背景：url（../img/bg_meshdot.png）rgba（255255,0.2）；位置：相对；}

注意：这并不完美

我能用这件事取得大致相同的成就

$('div.checklist').waypoint({
    handler: function(event, direction) {
      var name = ".checklist";
      var menuYloc;
      var offset;
      $(window).scroll(function () {
        if(direction === "down"){
          menuYloc = 48;
        }else if(direction === "up"){
          menuYloc = 106;
        }
        offset = menuYloc+$(document).scrollTop()+"px";
        $(name).animate({top:offset},{duration:500,queue:false});
        event.stopPropagation();
      });
      event.stopPropagation();
    },
    offset: 45,
    scrollThrottle : 30
  });

有一个小错误，上升并不总是刷新。我不完全确定是什么引起的。但是菜单会很粘。我从你那里借了一些