如果类存在，则给下一个div一个上边距，但用php确定边距高度

Question

I'm trying to give the first div a top margin only if the class fixed-header exists, I've tried doing this with pure css but there were to many variables and I was losing track so I'm thinking use jquery.

Here's some simple html

<div id="page-container">
  <div id="header" class="fixed-header">header</div>
  <div>Test 2</div>
  <div>Test 3</div>
  <div>Test 4</div>
  <div>Test 5</div>
</div>

Basically, if .fixed-header does exists give the first div, in this case it's 'test2' a top margin which matches the header, if there is no 'div2' then give 'div3' a top margin and so on.

Now for the tricky part, the top margin must be determined from a php script, here's how I get the header height below.

<?php echo $header_options['header_height'] ?>

How can I do this in jquery?

Here's a basic fiddle to start me off

Answer 1

If i understood you correctly, you can do that in CSS like that:

.page-container div.fixed-header:nth-child(1) + div,
.page-container div:not(.fixed-header):nth-child(1){
    margin-top:20px;
    // or
    margin-top: <?php echo $header_options['header_height'] ?>px;
    background:red;
}

this will give the first div after .fixed-header or the first one in .page-container (if no fixed-header exists) a margin.

Demo

If you want the margin be exactly the same as the height of the header without php, then yes, you'll have to resort to javascript/jquery. Something like this

$('#page-container div.fixed-header:nth-child(1)').each(function(){
    $(this).next().css({'margin-top':$(this).height()});
});