Question

我试图给第一个div一个上限，只有当类固定标题存在时，我已经尝试用纯css做这个但是有很多变量而且我正在失去轨道所以我和＃39;思考使用jquery。

这里有一些简单的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>

基本上，如果.fixed-header确实存在，则给出第一个div，在这种情况下，它是＆＃39; test2＆＃39;与标题匹配的上边距，如果没有＆＃39; div2＆＃39;然后给出div3＆＃39;最高利润率等等。

现在对于棘手的部分，必须从PHP脚本确定上边距，这里是我如何得到下面的标题高度。

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

如何在jquery中执行此操作？

这是启动我的基本小提琴

Answer 1

使用length来查找div是否存在：

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

我认为它应该只适用于css：

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

Answer 2

你可以在CSS中做到这一点，你知道....你不需要求助于Javascript或jQuery。

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

Demo of the above，variation 1，variation 2

Answer 3

在页面开头使用CSS：

#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'] ?>
}

Answer 4

这里不需要jQuery ......

你想在.fixed-header之后使用div来获得保证金吗？使用相邻的选择器“+”

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

顺便说一下，你可以在＃header.fixed-header ...上设置一个保证金底部......; - ）

Answer 5

如果我理解正确，你可以在CSS中这样做：

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

这将给.fixed-header之后的第一个div或.page-container中的第一个div（如果不存在固定标题）给出一个边距。

Demo

如果你想要边距与没有php的标题的高度完全相同，那么是的，你将不得不求助于javascript / jquery。像这样的东西

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

Answer 6

好吧，如果每个边距相同，那么给容器提供一个数据属性。如果每个边距的高度不同，最直观的选择是为每个项目添加数据属性。

如果每个保证金相同，则代码为

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

您的标记应如下所示：

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

如果每个页面容器也具有相同的值，则这相当于以下CSS。

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

您也可以使用PHP生成此CSS文件。为了让生活更轻松，您甚至可以将其嵌入到HTML模板中。如果margin-height没有反映任何信息，那么可能生成CSS是最好的选择，因为那时，您不需要在<style>或<script>标记之外放置无用的信息。

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

另一种选择是使用CSS3 attr，这在所有浏览器中尚未完全支持。 https://developer.mozilla.org/en-US/docs/Web/CSS/attr

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

这允许您删除脚本，但不幸的是，您必须为每个data-margin-height设置.fixed-header。

我在这些示例中使用了.page-container类，因为如果在同一页面上有多个不同的容器，则可以使用此解决方案。如果您只需要一个，则只需将每个.page-container替换为#page-container，代码即可生效。小提琴： http://jsfiddle.net/k5V2a/

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

6 个答案: