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

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

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

Use length to find the div exits or not:

if($('.fixed-header').length > 0){
//do your stuff here
}

And I think it should work just with css:

#page-container .fix-header{
    margin: 5px;
}

You can do this in CSS alone you know....you dont need to resort to Javascript or jQuery.

#page-container div:nth-child(1)[class='fixed-header']{
    background:red;
}

Demo of the above, variation 1, variation 2

Use CSS in the head of the page:

#page-container #header.fixed-header + div {
    /* the following should be parsed by php, but
       I don't know whether this generates a full CSS
       rule, or just the relevant length. Adjust as appropriate */
    <?php echo $header_options['header_height'] ?>
}

There's no need for jQuery in here...

You want to div that follows .fixed-header to have a margin? Use the adjacent selector "+"

<style>
#header.fixed-header {height: <?php echo $header_options['header_height'] ?>px}
#header.fixed-header + div {margin-top: <?php echo $header_options['header_height'] ?>px}
</style>

Btw, you could just set a margin-bottom on #header.fixed-header... ;-)

Well, if each margin is the same, then give a data-attribute to the container. If each margin has different height, the most intuitive option is to put a data attribute to each item.

If each margin is the same, here is you code

$(".fixed-header").each(function(item) {
    $($(item).next()).css('margin-top', $(item).parent().data('margin-height'));
});

Your markup should look like this:

<div id="page-container" data-margin-height="50px">
  <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>

This is equivalent to the following CSS, if every page-container has the same value as well.

.page-container .fixed-header + div {
    margin-top: 50px;
}

You can generate this CSS file with your PHP as well. To make life easier, you can even embed this to you HTML template. If the margin-height does not reflect any information, then possibly generating your CSS is the best option, because then, you don't need to put useless information outside a <style> or <script> tag.

<style>
    .page-container .fixed-header + div {
        margin-top: <?php echo $header_options['header_height'] ?>;
    }
</style>

Another option is to use CSS3 attr, which is not yet supported completely in all browsers. https://developer.mozilla.org/en-US/docs/Web/CSS/attr

.page-container .fixed-header + div {
   margin-top: attr(data-margin-height);
}

This allows you to get rid of your script, but unfortunately, you will have to set data-margin-height for each .fixed-header.

I used .page-container classes in these examples, because this solution can be used if you have multiple different containers on the same page. If you only need one, you can just replace each .page-container to #page-container, and the code will work. Fiddle: http://jsfiddle.net/k5V2a/