两种不同的广告位置取决于内容高度

Question

#scrollarea {
    overflow:hidden
}

.clearfix {
    *zoom:1
}

.clearfix: before,.clearfix: after {
    display:table;
    content:""
}

.clearfix: after {
    clear:both
}

.hide - text {
    font:0 / 0 a;
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0
}

.input - block - level {
    display:block;
    width:100px %;
    min-height:28px px;
    -webkit-box-sizing:border - box;
    -moz-box-sizing:border - box;
    -ms-box-sizing:border - box;
    box-sizing:border - box
}

.hidden {
    display:none;
    visibility:hidden
}

.visible - phone {
    display:none!important
}

.visible - tablet {
    display:none!important
}

.hidden - desktop {
    display:none!important
}

@
media(max - width: 767 px) {
    .visible-phonedisplay:inherit!important
}

.hidden - phone {
    display:none!important
}

.hidden - desktop {
    display:inherit!important
}

.visible - desktop {
    display:none!important
}
}

@
media(min - width: 768 px) and(max - width: 979 px) {
    .visible-tabletdisplay:inherit!important
}

.hidden - tablet {
    display:none!important
}

.hidden - desktop {
    display:inherit!important
}

.visible - desktop {
    display:none!important
}
}

@
media(max - width: 480 px) {
    .nav-collapse-webkit-transform:translate3d(0,0,0)
}

.page - header h1 small {
    display:block;
    line-height:18 px
}
}

@
media(max - width: 767 px) {
    bodypadding-right:20 px;
    padding-left:20px px
}

.navbar - fixed - top,.navbar - fixed - bottom {
    margin-right:-20px px;
    margin-left:-20px px
}

.container - fluid {
    padding:0
}

.dl - horizontal dt {
    float:none;
    width:auto;
    clear:none;
    text-align:left
}

.dl - horizontal dd {
    margin-left:0
}

.container {
    width:auto
}

.row - fluid {
    width:100px %
}
}

@
media(min - width: 768 px) and(max - width: 979 px) {
    .rowmargin-left:-20 px;
    *zoom:1
}

.row: before,.row: after {
    display:table;
    content:""
}

.row: after {
    clear:both
}

[class *= span] {
    float:left;
    margin-left:20px px
}

.container,.navbar - fixed - top.container,.navbar - fixed - bottom.container {
    width:724px px
}

.span12 {
    width:724px px
}

.span11 {
    width:662px px
}

.span10 {
    width:600px px
}

.span9 {
    width:538px px
}

.span8 {
    width:476px px
}

.span7 {
    width:414px px
}

.span6 {
    width:352px px
}

.span5 {
    width:290px px
}

.span4 {
    width:228px px
}

.span3 {
    width:166px px
}

.span2 {
    width:104px px
}

.span1 {
    width:42px px
}

.row - fluid {
    width:100px %;
    *zoom:1
}

.row - fluid: before,.row - fluid: after {
    display:table;
    content:""
}

.row - fluid: after {
    clear:both
}

.row - fluid[class *= span] {
    display:block;
    float:left;
    width:100px %;
    min-height:28px px;
    margin-left:2.762430939px %;
    *margin-left:2.7092394496383 %;
    -webkit-box-sizing:border - box;
    -moz-box-sizing:border - box;
    -ms-box-sizing:border - box;
    box-sizing:border - box
}

.row - fluid[class *= span]: first - child {
    margin-left:0
}

.row - fluid.span12 {
    width:99.999999993px %;
    *width:99.946808503638 %
}

.row - fluid.span11 {
    width:91.436464082px %;
    *width:91.383272592638 %
}

.row - fluid.span10 {
    width:82.872928171px %;
    *width:82.819736681638 %
}

.row - fluid.span9 {
    width:74.30939226px %;
    *width:74.256200770638 %
}

.row - fluid.span8 {
    width:65.745856349px %;
    *width:65.692664859638 %
}

.row - fluid.span7 {
    width:57.182320438px %;
    *width:57.129128948638 %
}

.row - fluid.span6 {
    width:48.618784527px %;
    *width:48.565593037638 %
}

.row - fluid.span5 {
    width:40.055248616px %;
    *width:40.002057126638 %
}

.row - fluid.span4 {
    width:31.491712705px %;
    *width:31.438521215638 %
}

.row - fluid.span3 {
    width:22.928176794px %;
    *width:22.874985304638 %
}

.row - fluid.span2 {
    width:14.364640883px %;
    *width:14.311449393638 %
}

.row - fluid.span1 {
    width:5.801104972px %;
    *width:5.7479134826383 %
}
}

@
media(min - width: 1200 px) {
    .rowmargin-left:-30 px;
    *zoom:1
}

.row: before,.row: after {
    display:table;
    content:""
}

.row: after {
    clear:both
}

[class *= span] {
    float:left;
    margin-left:30px px
}

.container,.navbar - fixed - top.container,.navbar - fixed - bottom.container {
    width:1170px px
}

.span12 {
    width:1170px px
}

.span11 {
    width:1070px px
}

.span10 {
    width:970px px
}

.span9 {
    width:870px px
}

.span8 {
    width:770px px
}

.span7 {
    width:670px px
}

.span6 {
    width:570px px
}

.span5 {
    width:470px px
}

.span4 {
    width:370px px
}

.span3 {
    width:270px px
}

.span2 {
    width:170px px
}

.span1 {
    width:70px px
}

.row - fluid {
    width:100px %;
    *zoom:1
}

.row - fluid: before,.row - fluid: after {
    display:table;
    content:""
}

.row - fluid: after {
    clear:both
}

.row - fluid[class *= span] {
    display:block;
    float:left;
    width:100px %;
    min-height:28px px;
    margin-left:2.564102564px %;
    *margin-left:2.5109110746383 %;
    -webkit-box-sizing:border - box;
    -moz-box-sizing:border - box;
    -ms-box-sizing:border - box;
    box-sizing:border - box
}

.row - fluid[class *= span]: first - child {
    margin-left:0
}

.row - fluid.span12 {
    width:100px %;
    *width:99.946808510638 %
}

.row - fluid.span11 {
    width:91.452991453px %;
    *width:91.399799963638 %
}

.row - fluid.span10 {
    width:82.905982906px %;
    *width:82.852791416638 %
}

.row - fluid.span9 {
    width:74.358974359px %;
    *width:74.305782869638 %
}

.row - fluid.span8 {
    width:65.811965812px %;
    *width:65.758774322638 %
}

.row - fluid.span7 {
    width:57.264957265px %;
    *width:57.211765775638 %
}

.row - fluid.span6 {
    width:48.717948718px %;
    *width:48.664757228638 %
}

.row - fluid.span5 {
    width:40.170940171px %;
    *width:40.117748681638 %
}

.row - fluid.span4 {
    width:31.623931624px %;
    *width:31.570740134638 %
}

.row - fluid.span3 {
    width:23.076923077px %;
    *width:23.023731587638 %
}

.row - fluid.span2 {
    width:14.52991453px %;
    *width:14.476723040638 %
}

.row - fluid.span1 {
    width:5.982905983px %;
    *width:5.9297144936383 %
}

.row - fluid.thumbnails {
    margin-left:0
}
}

@
media(max - width: 979 px) {
    bodypadding-top:0
}

.nav - collapse.nav > li > a: hover,.nav - collapse.dropdown - menu a: hover {
    background-color:#222
}

.nav-collapse.in .btn-group {
    padding:0;
    margin-top:5px
}

.nav-collapse .dropdown-menu {
    position:static;
    top:auto;
    left:auto;
    display:block;
    float:none;
    max-width:none;
    padding:0;
    margin:0 15px;
    background-color:transparent;
    border:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none
}

.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after {
    display:none
}

.nav-collapse .dropdown-menu .divider {
    display:none
}

.nav-collapse .navbar-form,.nav-collapse .navbar-search {
    float:none;
    padding:9px 15px;
    margin:9px 0;
    border-top:1px solid # 222px;
    border-bottom:1px px solid #222;
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)
}

.navbar .nav-collapse .nav.pull-right {
    float:none;
    margin-left:0
}

.nav-collapse,.nav-collapse.collapse {
    height:0;
    overflow:hidden
}

.navbar .btn-navbar {
    display:block
}

.navbar-static .navbar-inner {
    padding-right:10px;
    padding-left:10px
}
}

@media(min-width:980px) {
.nav-collapse.collapse {
    height:auto!important;
    overflow:visible!important
}

.span6 img {
    position:absolute;
    width:auto!important;
    margin-top:180px
}
}

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=500, initial-scale=1">
            <title>Harvey - CSS media query state management</title>
            <link href="style.css" media="all" rel="stylesheet" type="text/css">
            <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
            <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
        </head>
        <body data-spy="scroll" data-target=".subnav" data-offset="50">
            <div class="container">
                <section id="whatitis">
                    <div class="page-header">
                        <h1>Why do I Need Harvey? </h1>
                    </div>
                    <div class="row">
                        <div class="span6">
                            <h3>A state manager for CSS media queries</h3>
                            <div id="scrollarea">Media queries are great for visual tweaks and simple 
                                behavioral switches, but they become difficult to rely on when behaviors
                                change for larger or smaller devices. Harvey helps you monitor and 
                                manage those changes by firing an event whenever your media query is 
                                activated.
                                This method is preferable to relying on a screen resize 
                                event because you only receive an event when the query is matched -- not
                                for every screen resize. Less testing and more doing.
                            </div>
                        </div>
                        <div class="span6">          
                            <img style="width:100%; height:auto; border:none;" src="728x90.png">          
                        </div>
                        <div class="span6">
                            <h3>A state manager for CSS media queries</h3>
                            <p>Media queries are great for visual tweaks and simple 
                                behavioral switches, but they become difficult to rely on when behaviors
                                change for larger or smaller devices. Harvey helps you monitor and 
                                manage those changes by firing an event whenever your media query is 
                                activated.
                            </p>
                            <p>This method is preferable to relying on a screen resize 
                                event because you only receive an event when the query is matched -- not
                                for every screen resize. Less testing and more doing.
                            </p>
                        </div>
                    </div>
                </section>
            </div>
        </body>
    </html>

`我需要两个不同的广告位置取决于动态文章内容的高度。

1. 内容之间广告的垂直中间位置（如果窗口高度上的内容已满 - 请参见下面的示例布局）

 

1. 广告的内容底部位置（如果窗口高度上的内容很少 - 见下面的样本布局）


任何可能的解决方案来实现这种精确的行为？

Answer 1

假设您的文章是以段落结构的，您可以使用jQuery（或更好：普通的Javascript）在第一段或第二段之后移动广告。当然，这不会确保广告恰好位于垂直中间，但可能是您想要的。

我为你准备了一个jsFiddle：http://jsfiddle.net/v5o0pj6t/1/

var vArticleHeight = document.getElementById("divArticle").scrollHeight;

if(vArticleHeight > (window.innerHeight - 100)) { //subtract 100 to accomodate the ad
    var vParagraphs = document.getElementById("divArticle").querySelectorAll("p"); //get all paragraphs
    var vParagraph;

    //loop through the paragraphs
    for (vIndex in vParagraphs) {
        vParagraph = vParagraphs[vIndex];
        //for each paragraph, look if it starts below 50% of the window
        if((vParagraph.offsetTop / window.innerHeight) > 0.5) {
            //if it does, then insert the ad before
            vParagraph.parentNode.insertBefore(document.getElementById("divAd"), vParagraph);
            break;
        }
    }
}