Question

我开发了一个带HTML的标题。滚动超过25px时，使用jQuery将类fixed添加到标头中。请参阅：http://codepen.io/anon/pen/jPXYKj

班级fixed具有以下属性：

header.fixed {
    position: fixed;
    top: 0;
    width: 1055px;
}

只是固定标题的基本内容。这是有效的，在25px之后它会随你滚动，但正如你所看到的，内容会跳到上面，因为标题的高度不再是relative。

因此我的问题。如何解决这个问题，使内容保持在原来的位置，最好不要使用绝对定位。

我尝试将类fixed添加到body元素中，然后在我的css中调用主要部分并在主元素中添加margin-top，但是，当您向下和向上滚动时，主要元素内容越来越低。

Answer 1

只要标题被修复，只需为main元素设置上边距;您的内容将保持其垂直偏移，防止其跳跃＆＃34;。要实现这一点，您可以向main元素添加一个类，或使用鲜为人知的邻接选择器：

header.fixed + main {
  // 75px header height + 25px header top margin
  margin-top:100px;
}

header.fixed + main在main元素后面选择header个元素，并使用类fixed。

演示此纯CSS解决方案here。

Answer 2

$("#submit").validate({
    rules: {
        type: "required",
        group: {
            required: {
                depends: function() {
                    if ($('#type').val() == 8) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        }
    },
    messages: {
        group: "groups are required."
    }
});

Answer 3

您可以在修复标题时向内容添加padding-top。请参阅以下代码段：

$(document).ready(function() {
  
  function fixedHeader() {
      // Global variables
      var offset = 25;

      // Scroll function
      $( window ).scroll(function () {

        // Where the magic happens
        if (window.pageYOffset > offset ) {
          $("header").addClass(' fixed');
          $(".content").addClass(' content-top');
        }

      });

    } fixedHeader();
  
  });

header { 
  height: 75px;
  width: 100%; 
  margin-top: 25px;
  position: relative;
  background: #1ed761;
}

.content-top {
    padding-top:100px;
}

section { padding-top: 30px;}
main > div {margin-bottom:30px;}

.fixed {
  position:fixed!important;
  top: 0;
  width: 1115px;
  z-index: 10;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <header class="row">
    Header
  </header>
  
  <main class="content">
    <section class="row">
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
       <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
      <div class="col-md-6">
        <img src="http://www.placehold.it/500x325">
      </div>
    </section>
  </main>
</div><!-- End .container -->

Answer 4

您可以在else条件

中添加window.pageYOffset语句

if (window.pageYOffset > offset ) {
    $("header").addClass(' fixed');
} else {
    $("header").removeClass('fixed');
}

几乎删除了.fixed类，并将header元素置于其原始状态。

使用jQuery添加固定标头时的内容问题

4 个答案: