制作 2 个粘性 div 和 1 个可滚动答案

【问题标题】：Making 2 sticky divs and one scrollable制作 2 个粘性 div 和 1 个可滚动
【发布时间】：2014-02-12 18:05:14
【问题描述】：

这就是我想要实现的目标：我想要一个粘性标题，在它的下方和相邻的一个粘性 div（它将包含一个图像，它的高度可能会有所不同，具体取决于附加的图像大小）；在这个粘性图像容器下方，我想要一个 div，其中包含一个较小 div 的画廊，当然，画廊 div 必须是可滚动的。到目前为止，这是我所拥有的：

HTML：

<body>
<header>
    <div id="header_content">Header title</div>
</header>

<section>
<div id="div_main_image_container">
    <div id="div_main_image">
        <img id="img_main" src="http://imageshack.com/a/img543/2281/iu7x.jpg" />
    </div>
</div>
<div id="gallery">
    <div class="div_item_container">1</div>
    <div class="div_item_container">2</div>
    <div class="div_item_container">3</div>
    <div class="div_item_container">4</div>
    <div class="div_item_container">5</div>
    <div class="div_item_container">6</div>
    <div class="div_item_container">1</div>
    <div class="div_item_container">2</div>
    <div class="div_item_container">3</div>
    <div class="div_item_container">4</div>
    <div class="div_item_container">5</div>
    <div class="div_item_container">6</div>
    <div class="div_item_container">1</div>
    <div class="div_item_container">2</div>
    <div class="div_item_container">3</div>
    <div class="div_item_container">4</div>
    <div class="div_item_container">5</div>
    <div class="div_item_container">6</div>
    <div class="div_item_container">1</div>
    <div class="div_item_container">2</div>
    <div class="div_item_container">3</div>
    <div class="div_item_container">4</div>
    <div class="div_item_container">5</div>
    <div class="div_item_container">6</div>
    <div class="div_item_container">1</div>
    <div class="div_item_container">2</div>
    <div class="div_item_container">3</div>
    <div class="div_item_container">4</div>
    <div class="div_item_container">5</div>
    <div class="div_item_container">6</div>
    <div class="div_item_container">1</div>
    <div class="div_item_container">2</div>
    <div class="div_item_container">3</div>
    <div class="div_item_container">4</div>
    <div class="div_item_container">5</div>
    <div class="div_item_container">6</div>  
</div>

CSS

body { font-family:Verdana, Calibri, Arial, Helvetica, sans-serif; }

header { background:#000; height:60px; left:0; position:fixed; width:100%; top:0; }
#header_content{ line-height:60px; margin:0 auto; width:785px; color:#fff; }

section
{
  height:auto;
  left:0;
  position:fixed;
  width:100%;
  top:60px;
}

#div_main_image_container
{
  margin:auto;
  width:785px;
  color:#399;
  background-color:#E0E0E0;
  overflow:hidden;
  margin-bottom:10px;
  border-radius:0 0 3px 3px;
}

#div_main_image
{
  margin:5px;
  width:775px;
  overflow:hidden;
  border-radius:3px;
}

#div_main_image img { border-radius:3px; }

#gallery
{
  margin:auto;
  width:785px;
  color:#399;
  background-color:#fff;
}

.div_item_container
{
  width:235px;
  padding:5px;
  float:left;
  margin-right:25px;
  background-color:#E0E0E0;
  border-radius:3px;
  margin-bottom:20px;
}

.div_item_container:nth-child(3n+0) { margin-right:0; }

这是完整的工作代码：

http://jsfiddle.net/272ww/5/

我无法使画廊 div 可滚动。我试图把它放在外面，但我不能让它正好在粘性图像 div 的下方。我也无法将其固定在某个位置，因为图像 div 的高度可能会因图像而异。

怎么做？

【问题讨论】：

标签： html css sticky

【解决方案1】：

更新 css

section
   {
        height:auto;
        width:100%;
        padding-top:60px;
   }
    #div_main_image_container
    {
        position:fixed;
        top:80px;
        margin:auto;
        width:785px;
        margin-left:50%;
        left:-392px;
        color:#399;
        background-color:#E0E0E0;
        overflow:hidden;
        margin-bottom:10px;
        border-radius:0 0 3px 3px;
    }

jQuery 设置位置

var headerHeight = $('#header_content').outerHeight(),
        imgHeight = $('#div_main_image_container').outerHeight();
        myPaddingTop = headerHeight + imgHeight;
    $('#gallery').css({
        paddingTop: myPaddingTop
    })

Update Demo

【讨论】：

谢谢，但同样，主图像 div <div id="div_main_image_container"> 也必须是粘性的，画廊必须在其下方滚动。
是的，几乎是我需要的，只是做了同样的事情，只是稍微重新排列了 HTML 和 CSS：jsfiddle.net/272ww/12 谢谢！

【解决方案2】：

首先，你需要移除 position:fixed;从您的部分，这将使页面可滚动。至于其他内容，恐怕还需要进一步解释:(

【讨论】：

我在问问题之前尝试过，它确实使页面可滚动，但随后主图像也会滚动，而它必须固定在标题下方。只有 id 为“gallery”的 div 必须是可滚动的（包含其所有内容）。
类似的东西？可滚动内容在上面的固定内容之上流动在哪里？ jsfiddle.net/jennift/272ww/10。或者滚动只发生在底部。在这种情况下，我建议让 div 本身可滚动。请注意，我没有修复它的外观或进一步改进它，只是确保这是您首先想要的。
它更接近我的需要，是的。图库必须居中并在图像容器下方滚动（我猜很容易用 z-index 固定）。
Rakesh 答案更好，因为它允许图像具有您所要求的不同高度