1

これを行うためのより良い方法が必要です。

  • フッターメニューを複製して（clone（）を介して）#footerにホバーイベントを追加し、フッターが$（window）に表示されていない限り表示します

ノート

  • div＃footerのdiv＃menu子は、画面の下部に位置：固定されています。

  • コンテンツの下部にスティックフッターを使用するcssハック

コードをより適切に最適化するにはどうすればよいですか...特に、実際のフッターが表示されているときにコードがポップアップしたくない部分はどうでしょうか。

CSS：

.floatingMenu { display:block; position:fixed; width:100%; }
#menu{position:fixed;bottom:0;width:100%;z-index:10;}
/**footer at bottom**/
html, body, #wrap, #body-container { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
body > #body-container {height:auto;min-height:100%}
#main{padding-bottom:300px;min-height:250px;}
#footer{position:relative;margin-top:-300px;height:300px;clear:both;}
.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display: inline-block}
html .clearfix { height: 1%}
.clearfix {display: block}

HTML

<body>
  <div id="body-container">
    <div id="main" class="clearfix">
    </div>
  </div>

  <div id="footer">


    <div id="menu">

      <div id="menu-footer" class="menu-container">
        <div class="wrap">
          <?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php file ?>
        </div>
      </div>
    </div> <!-- #menu -->


    <div id="footer-links" class="footer-color">
      <?php wp_footer(); // WordPress footer hook ?>
      <?php echo apply_atomic_shortcode( 'footer_content', hybrid_get_setting( 'footer_insert' ) ); ?>
    </div>
  </div><!-- #footer-links -->


  </div><!-- #footer -->
</body>

JS V1（以下にさらに多くのバージョンがあります）

<script type="text/javascript">
  function addHoverEvent(varObject, varSpeed) {
    varObject.css("display", "block").addClass('floatingMenu')
    .animate({'bottom': '18px'}, varSpeed / 0.75);
  }
  function exitMenu(varObject, varSpeed) {
    varObject.stop(true,true).delay(1050).animate({'bottom': '-100%'}, varSpeed,
      function(){
        $(this).removeClass('floatingMenu');
        varObject.css("display", "none");
      }
    );
  }
$(document).ready(function() {
  var
    varSpeed = 900,
    varBindObject = $('#footer');

    varObject = $('#footer-links').clone().appendTo('#footer');
    varObject.css("display", "none");

    $(window).scroll(function() {
      var
        varBindObject = $('#footer'),
        y = $(window).scrollTop(),
        w = $(window).height(),
        c = $('#footer-links').offset();

      if(y+w>c.top) {
        //varBindObject.data("events");
        varBindObject.die();
      } else {
          varBindObject
          .live('mouseenter', function() {
            addHoverEvent(varObject, varSpeed);})
          .live('mouseleave', function () { 
            exitMenu(varObject, varSpeed);});
      }
    });

    varBindObject
    .live('mouseenter', function() {
      addHoverEvent(varObject, varSpeed);
    })
    .live('mouseleave', function () { 
      exitMenu(varObject, varSpeed);
    });
});
</script>

JS V2

<script type="text/javascript">
  function addHoverEvent(varObject, varSpeed) {
    varObject.css("display", "block").addClass('floatingMenu')
    .animate({'bottom': '18px'}, varSpeed / 0.75
             // { duration: 'fast',
             //   easing: 'in-out'
             // }
             );
  }
  function exitMenu(varObject, varSpeed) {
    varObject.stop(true,true).delay(900).animate({'bottom': '-100%'}, varSpeed,
      function(){
        $(this).removeClass('floatingMenu');
        varObject.css("display", "none");
      }
    );
  }
  function isOnScreen(element) {
    var offset = element.offset().top - $(window).scrollTop();

    if(offset > window.innerHeight){
        // Not in view so scroll to it
        return false;
    }
   return true;
  }

$(document).ready(function() {
  var
    varSpeed = 900,
    varBindObject = $('#footer');

    varObject = $('#footer-links').clone().appendTo('#footer');
    varObject.css("display", "none");

    if(isOnScreen($('#footer-links'))) {
    }else{
    varBindObject
    .live('mouseenter', function() {
      addHoverEvent(varObject, varSpeed);
    })
    .live('mouseleave', function () { 
      exitMenu(varObject, varSpeed);
    });
    }

    $(window).scroll(function() {
      var
        varBindObject = $('#footer'),
        y = $(window).scrollTop(),
        w = $(window).height(),
        c = $('#footer-links').offset();

        varBindObject
          .live('mouseenter',
                function() {
            addHoverEvent(varObject, varSpeed);
                })
          .live('mouseleave',
                function () { 
            exitMenu(varObject, varSpeed);
                });

      if(isOnScreen($('#footer-links'))) {
      //if(y+w>c.top) {
        varBindObject.die();
      }
    });
});
</script>
4

1 に答える 1

0

私があなたの質問を正しく理解していれば、#menu コンテナ内に #footer-links 要素を複製してください。#footer 要素が閉じられたときwindow。

それが正しければ、これでうまくいくはずです：

jQuery('#footer').hover(function () {
    // Clone the element
    new_el = jQuery('#footer-links').clone();

    // Check if it should be made visible
    new_el.attr('hidden', jQuery('#footer:visible', jQuery(window)).length > 0);

    // Append it to the menu container (change this to append somewhere else)
    new_el.appendTo('#footer');
})

jQuery.mouseenter()代わりにこれをイベントにバインドすることもできますjQuery.hover()

それが役立つことを願っています!

于 2012-09-19T02:28:14.570 に答える