1

必须有更好的方法来做到这一点。

  • 将悬停事件添加到 #footer 以复制（通过 clone() ）页脚菜单并显示它，除非页脚显示在 $(window) 中

笔记

  • div#footer 的 div#menu 子项的位置：固定在屏幕底部。

  • 使用标签页脚到内容 css hack 的底部

我怎样才能更好地优化代码......尤其是在显示实际页脚时我不希望它弹出的部分？

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 回答