Making 2 sticky divs and one scrollable

StackOverflow https://stackoverflow.com/questions/21723672

  •  10-10-2022
  •  | 
  •  

Domanda

Here's what I'm trying to achieve: I want to have a sticky header, below it and adjacent to it a sticky div (which will contain an image, and it's height may vary, depending on the attached image size); below this sticky image container I want to have a div which will contain a gallery of smaller divs, and the gallery div must be scrollable, of course. Here's what I have so far:

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; }

Here's the full working code:

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

I can't make the gallery div be scrollable. I tried to place it outside the , but I can't make it to be exactly below the sticky image div. I also can't make it be fixed in a position, since the image div's height may change from image to image.

How can it be done?

È stato utile?

Soluzione

Update 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 to Set Position

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

Update Demo

Altri suggerimenti

First of all, you need to remove position:fixed; from your section, that will make page scrollable. As for the other contents, I'm afraid I need further explanation :(

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top