位置固定标题与下拉菜单覆盖冲突

我已经建立了一个站点，其头部固定在设计之上，因此它始终存在于整个站点中。问题是我不得不使容器的头部和底座高得足以容纳掉落状态。这几乎可以正常工作，但现在有些页面由于标题/码头叠加而无法点击......这是一个css问题以及标题/文档的构建方式。我不确定是否有另一种方式来做到这一点。如果任何人想要提出想法或解决方案，那将是美好的。位置固定标题与下拉菜单覆盖冲突

容器上已隐藏溢出，所以当处于放置状态时，播放所有视频将被切断。在萤火虫玩耍，你会看到我的困境。

这才是真正的JS，但不完全正确的工作，因为我一直无法许多不同的尝试后移动船坞备份..

$('#play-the-series').click(function(){ 
      $('#main-nav #content').animate({ 
        top: '0' 
       }, 1000, 'jswing'); 
     });

这里是链接到该网站：http://www.districtdesigngroup.com/basho/

这是一个艰难的，所以我赞扬谁想要对其进行破解。谢谢

来源

2012-10-01 EZDC

究竟是什么问题？你指的是什么下降状态？ –

其中是动画显示下拉效果的JavaScript？ – tmsimont

在jquery.extras.js – EZDC

基本上你会想让＃main-nav元素只有195px的CSS高度，那么你同时在内部元素的顶部设置动画+ 200px，你应该扩展#main的高度-nav 200px以及。折叠标题时做相反的事情。

试试这个代码：

$('#play-the-series').click(function(){ 
    // check for a "open" class on the main-nav 
    if (!$("#main-nav").hasClass('open')) { 

    // your animation 
    $('#main-nav #content').animate({ 
     top: 0 
    }, 1000, 'jswing'); 

    // container animation 
    $('#main-nav').animate({ 
     height: 395 
    }, 1000, 'jswing'); 

    // add class to main-nav 
    $("#main-nav").addClass('open'); 

    } else { 

    //reverse everything: 

    $('#main-nav #content').animate({ 
     top: -200 
    }, 1000, 'jswing'); 
    $(this).addClass('open'); 

    $('#main-nav').animate({ 
     height: 195 
    }, 1000, 'jswing'); 

    $("#main-nav").removeClass('open'); 
    } 
});

或者，也可以使＃主导航元素中使用绝对定位，但你不得不更改您的标记，一吨的其他新的CSS编辑

来源

2012-10-01 23:34:43 tmsimont

添加js到原来的问题...是的，我没有考虑动画的高度以及。谢谢。 – EZDC

如何获得动画备份的下拉菜单？这是另一个问题，我已经问了，但没有得到任何回应... http://stackoverflow.com/questions/12682459/position-fixed-header-with-drop-down-doc-overlay-conflict#comment17117509_12682459 – EZDC

如何制作＃main-nav元素位置绝对帮助？我需要nav始终保持页面顶部。 – EZDC

位置固定标题与下拉菜单覆盖冲突

回答

相关问题