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

注: これは完全ではありません。

これでほぼ同じことを達成できました。

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

上に行くと常に更新されないという小さなバグがあります。何が原因なのか完全にはわかりません。しかし、メニューは十分に粘着性があります。これの一部をNettutsから借りました。

于 2012-06-18T21:12:56.690 に答える