javascript - 如何在动态内容中显示垂直中间广告(窗口高度 50%)

Question

我需要在动态内容(包括图像和表格的内容)之间实现垂直中间广告。我必须为此广告添加一些棘手的位置。

(注意:它是完全响应式布局。因此高度和宽度会因设备而异)

1. 如果 Div 内容高度适合窗口高度(没有垂直滚动)，则广告将在垂直中间显示。
2. 如果 Div Content 高度超过窗口高度(垂直滚动)，广告将显示在垂直中间。
3. 如果 Div 内容高度小于窗口高度(没有垂直滚动，小于 5 行)，广告将看到内容的结尾

引用以下示例内容:-

<div id="outer">
  <img style="float:left; margin-right:10px;" src="cow.jpg"> Location 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  <table style="border: solid 1px #ccc; margin-bottom:10px; width:100%">
    <tr>
      <td style="border-right: solid 1px #ccc;border-bottom: solid 1px #ccc; padding:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      <td style="border-bottom: solid 1px #ccc;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
    </tr>
    <tr>
      <td style="border-right: solid 1px #ccc;border-bottom: solid 1px #ccc;padding:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      <td style="border-bottom: solid 1px #ccc;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
    </tr>
    <tr>
      <td style="border-right: solid 1px #ccc;padding:10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      <td >Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
    </tr>
  </table>
  Location 2.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.      
</div>

感谢您就如何解决此问题提供意见？？？

Answer 1

您可以使用 $(window).height() 开始寻找执行此操作的方法和 $(document).height()确定您的内容是否高于窗口，然后使用 position().top 将您的广告定位在右上角。

var windowHeight = $(window).height();
var pageHeight = $("body").height();
var adHeight = $("#middle").height();
var scrollPos = $("body").scrollTop();

if ((pageHeight+adHeight)>windowHeight){
    $("article div p").each(function(){
        var middleScreen = (windowHeight/2)+scrollPos;
        if($(this).position().top>middleScreen){
            $("#middle").prependTo($(this));
            return false;
        }    
    });
}else{
    $("#middle").appendTo($("article div p:last-child"));
}

请找一个Live Exemple (请注意，我还没有完成调整大小的工作，因此您必须在调整窗口大小后“运行” fiddle 。)

---

首先，我存储浏览器、文档、广告高度和滚动位置。滚动页面刷新后将使用滚动位置。

var windowHeight = $(window).height();
var pageHeight = $("body").height();
var adHeight = $("#middle").height();
var scrollPos = $("body").scrollTop();

然后，我检查我的内容高度(包括广告')是否大于我的浏览器高度。我遍历所有 P在 <article> 内标记，并检查其位置是否大于浏览器高度的一半(因此，>50% 顶部)，并尽快 P标签很棒，我停止了 each()循环并在此 P 之前插入广告' :

if ((pageHeight+adHeight)>windowHeight){
    $("article div p").each(function(){
        var middleScreen = (windowHeight/2)+scrollPos;
        if($(this).position().top>middleScreen){
            $("#middle").prependTo($(this));
            return false;
        }    
    });
}

最后，如果内容较小，我会在最后一个 P 之后插入广告' :

}else{
    $("#middle").appendTo($("article div p:last-child"));
}