簡單的jQuery下拉菜單與禁用觸發器連接到頁腳

添加懸停事件#footer的是重複的（通過克隆（））頁腳菜單顯示，除非頁腳是顯示在$（窗口）

注意

div＃footer的div子菜單位置：固定在屏幕的底部。
用棍子頁腳內容的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>

來源

2012-09-19 user1681839

如果我正確理解你的問題，你要複製的#menu容器內的＃頁腳鏈接元素;當#footer元素被關閉時，但只有在window內沒有可見的#footer元素時纔可見。

如果這是正確的，那麼這應該做的伎倆：

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-19 02:28:14

我不認爲：可見的作品，因爲它的檢查屬性。我正在查看頁腳是否在瀏覽器視圖端口中可見。 **注意** DIV＃DIV菜單＃頁腳的孩子現在的位置：固定在屏幕 – user1681839

我說我的jQuery – user1681839

另外，我有，甚至使用顯示器的唯一理由的版本2的底部：none和顯示：塊屬性是因爲（doucment）。就緒有很多DIV＃頁腳 DIV＃頁腳鏈接2 ...但話又說回來有可能是一個更好的辦法，這些都不會發生，我也不會去理會改變顯示屬性 – user1681839

簡單的jQuery下拉菜單與禁用觸發器連接到頁腳

回答

相關問題