Question

我创建了一个功能，当我向下滚动时菜单得到修复。

当发生这种情况时，它会占用大量空间，因为你可以see in my demo fiddle所有文本都在固定条后面。

有没有办法在.top得到修复和.content之间保持更多的空间？

编辑：谢谢大家的回答。我选择马科斯＆＃39;一个是因为他是第一个，但我知道其他的也可以。

Answer 1

修复padding-top后，您必须使用内容的top。所以整个解决方案是：

.top.fixed + .content {
    padding-top: 155px;
}

你编辑过的小提琴：

https://jsfiddle.net/h65x3hyb/2/

Answer 2

请将脚本应用到其中。

$(function()
{
    $top = $('.top');

  $(window).on('scroll', function()
  {
    if ($(window).scrollTop() > 75)
    {
        $top.addClass('fixed');
      $('.content').css('padding-top:','196px');
    }
    else
    {
        $top.removeClass('fixed');
      $('.content').css('padding-top:','0');
    }
  });
});

Answer 3

您也可以将一个类添加到.content：

$(function() {
  var $top = $('.top'),
    $content = $('.content');

  $(window).on('scroll', function() {
    if ($(window).scrollTop() > 75) {
      $top.addClass('fixed');
      $content.addClass('margin');
    } else {
      $top.removeClass('fixed');
      $content.removeClass('margin');
    }
  });
});

.top {
  top: 0;
  height: 180px;
  width: 100%;
  background-color: red;
  box-sizing: border-box;
}
.top.fixed {
  height: 75px;
  position: fixed;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.content {
  height: 900px;
  background-color: green;
}
.content.margin {
  margin-top: 180px;
  /*height of top*/
}
p {
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">

</div>
<div class="content">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum
  </p>
</div>

Answer 4

尝试此操作，使用p在您的margin代码和jquery内容中添加填充。

$(function()
{
    $top = $('.top');

  $(window).on('scroll', function()
  {
    if ($(window).scrollTop() > 75)
    {
        $top.addClass('fixed');
      $(".content").css("marginTop","152px");
    }
    else
    {
        $top.removeClass('fixed');
      $(".content").css("marginTop","0px");
    }
  });
});

p
{
  margin: 0;
  padding-top:20px;
}

在顶部之后保持空间得到修复

4 个答案: