jquery - 位置固定标题与下拉文档覆盖冲突

Question

我建立了一个网站，其标题固定在设计之上，因此它始终存在于整个网站中。问题是我不得不让 header 和 dock 的容器足够高以适应 drop 状态。这几乎可以正常工作，但现在某些页面由于页眉/停靠栏覆盖而无法点击...这是一个 css 问题以及页眉/文档的构建方式。我不确定还有另一种方法可以做到这一点。如果有人愿意提出想法或解决方案，那就太好了。

容器上隐藏了溢出，因此当处于拖放状态时，所有视频的播放都会被中断。玩 Firebug ，你会看到我的困境。

这是实际的 JS，但无法正常工作，因为我在多次尝试后无法将扩展坞移回原位..

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

这是网站的链接:http://www.districtdesigngroup.com/basho/

这是一个艰难的过程，所以我赞扬任何想尝试一下的人。谢谢

Answer 1

基本上你会想用CSS使#main-nav元素只有195px的高度，然后同时你在内部元素的顶部设置+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');
  }
});

或者，您可以在#main-nav 元素中使用绝对定位，但是您必须更改您的标记并进行大量其他新的 CSS 编辑