Question

我有一个严重的问题：使用jQuery，我必须将所有元素向下移动，因为必须在那里放置广告横幅，以便它不会覆盖任何东西。它就像顶部的框架一样。我正在尝试这个：

jQuery('*').each(function() {
    var $this = jQuery(this);
    if ($this.css('position') === 'fixed' || $this.css('position') === 'absolute')
    {
        $this.css('margin-top', 80);
    }
});

但并非所有元素都被推送。

Answer 1

使用jQuery的组合为固定和绝对定位元素添加边距，并在主体上填充以覆盖静态定位元素，我相信您可以覆盖您所追求的内容。

注意我在jQuery中更改了选择器，以查找不属于“ad”类的元素。

这假设您的广告绝对定位。

$(':not(.ad)').each(function() {
    var $this = $(this);
    if ($this.css('position') === 'fixed' || $this.css('position') === 'absolute')
    {
        $this.css('margin-top', 80);
    }
});

body {
  padding-top: 80px;
}

.content {
  position: static;
  padding: 0 110px;
}

.ad {
  position: fixed;
  top: 0;
  left: 0;
  width: 728px;
  height: 80px;
  background: red;
}

div.abs {
  width: 100px;
  height: auto;
  position: absolute;
  background: gray;
  top: 0;
  left: 0;
}

div.fxd {
  width: 100px;
  height: auto;
  position: fixed;
  background: gray;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<p>Content in a static positioned block level div. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis elit nunc, a bibendum nisi volutpat id. Morbi pretium ultrices tortor sed porta. Praesent ullamcorper tristique luctus. Suspendisse sodales, est gravida accumsan sodales, urna turpis congue tortor, in ullamcorper justo magna et ex. Aliquam commodo, mi eget euismod volutpat, lorem lectus ultricies est, at congue velit ipsum vitae neque. Aenean consectetur ante lacus, ac iaculis sapien pulvinar a. Aenean porta porttitor faucibus. Sed nec metus vel enim suscipit placerat. Phasellus cursus pretium ex at venenatis.</p>
</div>

<div class="content">
<p>Content in a static positioned block level div. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis elit nunc, a bibendum nisi volutpat id. Morbi pretium ultrices tortor sed porta. Praesent ullamcorper tristique luctus. Suspendisse sodales, est gravida accumsan sodales, urna turpis congue tortor, in ullamcorper justo magna et ex. Aliquam commodo, mi eget euismod volutpat, lorem lectus ultricies est, at congue velit ipsum vitae neque. Aenean consectetur ante lacus, ac iaculis sapien pulvinar a. Aenean porta porttitor faucibus. Sed nec metus vel enim suscipit placerat. Phasellus cursus pretium ex at venenatis.</p>
</div>

<div class="abs">This is a <strong>absolute</strong> positioned div at 0/0</div>
<div class="fxd">This is a <strong>fixed</strong> positioned div at 0/0</div>

<div class="ad"></div>

Answer 2

试试这个。

jQuery(document).ready(function() {
        /*
        // For Down all Element Viewport
        $('html').css('margin-top', 80);
        // or
        // For Down all Element Body

        $('body').css('margin-top', 80);
        */
        // For all fixed or absolute element

       var elems = document.body.getElementsByTagName("*");
       var len = elems.length

       for (var i=0;i<len;i++) {

       if (window.getComputedStyle(elems[i],null).getPropertyValue('position') == 'fixed' || window.getComputedStyle(elems[i],null).getPropertyValue('position') == 'absolute') {
            elems[i].style.marginTop ='80px';
            }
        }
});

// If that content has a specific selector like ID or class, then use
$( your selector ).css("margin-top","80px");

jQuery，将所有元素移动得更低

2 个答案: