0

我已经建立了一个带有固定在设计顶部的标题的站点，因此它始终存在于整个站点中。问题是我必须使头部和停靠的容器足够高以适应放置状态。这几乎可以正常工作，但是由于标题/停靠栏覆盖，现在某些页面无法点击...这是一个 CSS 问题，也是标题/文档的构建方式。我不确定是否有另一种方法可以做到这一点。如果有人想提出想法或解决方案，那就太好了。

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

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

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

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

这是一个艰难的过程，所以我推荐任何想要尝试的人。谢谢

4

1 回答 1

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 编辑

于 2012-10-01T23:34:43.173 回答