Question

这是我正在努力实现的目标：我希望在它下面有一个粘性标题并且在它旁边有一个粘性div（它将包含一个图像，它的高度可能会有所不同，具体取决于附加的图像大小）;在这个粘性图像容器下面我想要一个div，它将包含一个较小div的图库，当然，gallery 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/

我无法使gallery div可滚动。我试图把它放在外面，但是我不能让它完全低于粘性图像div。我也无法将其固定在某个位置，因为图像div的高度可能会因图像而异。

怎么做？

Answer 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

Answer 2

首先，你需要删除位置：固定;从您的部分，这将使页面可滚动。至于其他内容，我恐怕需要进一步解释:(

制作2个粘性div和一个可滚动的div

2 个答案: