Javascript 挤压网页以显示广告

我有以下JSFIDLE链接

在哪里我试图挤压网页，以显示一个广告的权利

在dekstop浏览器上运行良好

但在ipad safari/chrome浏览器上它并没有受到挤压

下面是用于压缩/取消压缩网页的函数

 function squeeze_page(){
    d.body.style.paddingRight='160px';
    d.body.style.paddingLeft='160px';
    d.body.style.marginLeft='-160px';
    d.body.style.overflowX='hidden !important'; 
    is_page_squeezed=true;
 }

 function unsqueeze_page(){
   d.body.style.paddingRight='';
   d.body.style.paddingLeft='';
   d.body.style.marginLeft='';
   is_page_squeezed=false;
 }

---

请告诉我是否有其他方法可以压缩网页

也许这就是您想要的：

如果你想让广告幻灯片从右边显示，最好像我的例子中那样使用

CSS转换

首先，您需要有一个内容容器，在我的示例中，我添加了

<div id="container">
    ...
    <!-- Your Content Here -->
    ...
</div>

位置：固定
要使其位置在滚动时固定在视口中，
顶部
和
底部
设置为
0
以使其充满高度，
过渡
使其在显示时看起来像从右到左的幻灯片

与使用此样式的
div容器
相同

#container {
    margin-right:0;
    -webkit-transition: all ease-in-out 1s;
    -moz-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s;
}
#container.squeezed {
    margin-right:160px;
}

所以它看起来像是被广告挤压了

然后使用此
脚本
从
#容器
和
#测试
中添加或删除
类

window.onscroll = function () {
    if (pageYOffset > 100) {
        $("#test").addClass("show");
        $("#container").addClass("squeezed");
    } else if (pageYOffset < 100) {
        $("#test").removeClass("show");
        $("#container").removeClass("squeezed");
    }    
}

window.onscroll=函数（）{
如果（页面偏移>100）{
$（“测试”）.addClass（“显示”）；
$（“#容器”）.addClass（“压缩”）；
}否则如果（页面偏移<100）{
$（“#测试”）.removeClass（“显示”）；
$（“#容器”）.removeClass（“挤压”）；
}    
}
我可以将id容器的样式添加到标记中吗？@nyfer yes如果需要，您可以将
样式添加到
中，只需将
#容器
更改为
CSS中的
主体
window.onscroll = function () {
    if (pageYOffset > 100) {
        $("#test").addClass("show");
        $("#container").addClass("squeezed");
    } else if (pageYOffset < 100) {
        $("#test").removeClass("show");
        $("#container").removeClass("squeezed");
    }    
}