Question

我已经建立了一个网站，其标题固定在设计的顶部，因此它始终存在于整个网站中。问题是我必须使标题和容器的容器足够高以容纳掉落状态。这几乎正常工作，但由于标题/扩展坞重叠，现在某些页面无法点击...这是一个CSS问题以及标题/文档的构建方式。我不确定还有另一种方法可以做到这一点。如果有人愿意提出想法或解决方案，那就太棒了。

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

这是实际的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编辑

定位固定标题与下拉文档重叠冲突

1 个答案: