0

这是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;}
4

1 回答 1

0

Note: This isn't perfect.

I was able to achieve something roughly the same with this.

$('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
  });

There is a small bug where going up doesn't always refresh. I'm not entirely certain what is causing it. But the menu will be sticky enough. I borrowed some of this from Nettuts.

于 2012-06-18T21:12:56.690 回答