Question

如果内容很长，我的意思是如果主体的高度明显太长，如果有更多可滚动的部分，则固定标头效果很好。

但是，如果可滚动部分很小，则几乎可以一次看到主体页眉和页脚的阶段，然后如果滚动以查看主体的最后一个元素，则尽管强制滚动，固定的页眉仍会开始晃动。标头仍在晃动，但是如果添加内容并增加高度，它仍然可以正常工作。

实际上，问题出在哪里，在js code或css class structure中。我在此处添加了示例，但以下示例不会显示所有设备的问题，因为根据设备的高度，它的行为会有所不同。

var navpos = $('nav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > navpos.top) {
    $('nav').addClass('navfixed');
  } else {
    $('nav').removeClass('navfixed');
  }
});

nav {
  float: left;
  width: 100%;
  background: #0E539A;
}

nav ul li {
  position: relative;
  display: inline-block;
}

nav ul li a {
  padding: 10px 15px;
  display: block;
  color: #e7e7e7;
}

.navfixed {
  top: 0;
  left: 0;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="class.php">Class</a></li>
    <li><a href="submanage.php">Class-Subject</a></li>
  </ul>
</nav>
<div>
  Hello<br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> End
  <br/> This content will not be shown, because it is near to end<br/>
</div>

Answer 1

由于导航固定，因此您的代码不起作用，因此不再占用空间。为避免这种情况，您可以给导航器一个支架并设置其高度，以便在移动导航器时仍会占用该空间。

另外，根据我的评论，bind已过时，您应该改用on：

var $navHolder = $('.navHolder'),
   $nav = $navHolder.children('nav').eq(0),   // cache this for better performance
   navOffset = $nav.offset().top;             // might as well do this one too
   
$navHolder.height($nav.outerHeight());        // set height of holder

$(window).on('scroll', function() {
  if ($(this).scrollTop() > navOffset) {
    $nav.addClass('navfixed');
  } else {
    $nav.removeClass('navfixed');
  }
});

nav {
  width: 100%;
  background: #0E539A;
}

nav ul li {
  position: relative;
  display: inline-block;
}

nav ul li a {
  padding: 10px 15px;
  display: block;
  color: #e7e7e7;
}

.navfixed {
  top: 0;
  left: 0;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navHolder"> <!-- add this div -->
  <nav>
    <ul>
      <li><a href="class.php">Class</a></li>
      <li><a href="submanage.php">Class-Subject</a></li>
    </ul>
  </nav>
</div>
<div>
  Hello<br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> Hello
  <br/> End
  <br/> This content will not be shown, because it is near to end<br/>
</div>

jQuery固定标头无法正常工作

1 个答案: