Question

我已经使用过这个网站很长时间了，并且已经学到了很多很棒的东西，但这是我第一次提出问题，因为我似乎无法找到任何其他问题。回答它。

基本上我要做的就是这样：在我的网站上，我们有一个促销横幅＆＃39;所有页面上位于主内容块上方的元素。横幅包含一些长时间保持静态的促销文本，因此主内容块的上边距已根据静态高度设置。

然而，现在我们已经向将要定期更改的横幅添加了新内容，并且它使横幅扩展到其通常高度的两倍，从而使其覆盖主要内容块的一小部分。我可以通过其他媒体查询解决这个问题，但是我不想在每次更改内容时调整这些内容。

所以我编写了这个小jQuery脚本，以确定横幅是否已扩展为两行，如果是，则调整主内容块的上边距，使其不会被掩盖。

//Check if promo banner has expanded to two lines and adjust container margins accordingly
$(window).load(function() {

  function bannerHeight() {
    var $banner = $('.promo-banner');
    if($banner.height() > 30) {
      $('.main-content').css('margin-top',117+'px');
    }
  }
  // Execute on load
  bannerHeight();
  // Execute when window is resized
  $(window).resize(bannerHeight);

});

目前这在页面加载方面做得很好，在调整窗口大小的时候，但是在我的生活中我不知道如何在窗口调整大小到横幅去的地方时删除jQuery添加的样式属性返回到一行，以便边距可以恢复到样式表中的内容。

我希望这一切都有意义，如果有人有任何建议，这将是一个巨大的帮助！

Answer 1

我建议使用classes。使用以下css样式创建类似.addedMargin的类：margin-top:117px!important /*might not need the !important*/;

//Check if promo banner has expanded to two lines and adjust container margins accordingly

$(window).load(function() {

  function bannerHeight() {
    var $banner = $('.promo-banner');
    if($banner.height() > 30) {
        $('.main-content').addClass('addedMargin');
    }
    else
    {
        $('.main-content').removeClass('addedMargin');
    }
  }
  // Execute on load
  bannerHeight();
  // Execute when window is resized
  $(window).resize(bannerHeight);

});

通过这种方式，您可以轻松添加多个样式，并在不再需要时将其删除。

jQuery - 在窗口大小调整

1 个答案: