Question

我试图整合一个网站，该网站有一个欢迎型屏幕，后跟一个滚动到页面顶部的标题/导航，然后修复，作为用户保留在页面顶部滚动。我在大多数浏览器中使用的解决方案，除了桌面触摸版Chrome之外我无法阻止标题/导航器一旦到达顶部就会弹跳。我已经查看了至少10个解决此问题的Stack Overflow问题，并且我尝试了很多不同的教程和插件，但它们似乎都不适合我。我知道这是可能的，因为该技术出现在http://laravel.com上，当标题/导航到达顶部并变得固定时，标题/导航是ROCK-SOLID。这就是我现在所拥有的：

html {
  height: 100%; }

body {
  height: 100%; }

#welcome {
  background-color: grey;
  height: 100%; }

#header {
  background-color: white;
  box-shadow: 4px 4px 4px #888888;
  height: 90px;
  opacity: .93;
  position: absolute;
  width: 100%; }
  #header.fixed {
    position: fixed;
    top: 0;
    width: 100%; }

#nav {
  position: absolute;
  bottom: 30px;
  right: 2%; }
  #nav a {
    color: black;
    letter-spacing: 1px;
    line-height: 1.25em;
    padding-left: 17px;
    text-decoration: none;
    text-rendering: optimizelegibility;
    text-transform: uppercase; }

#about {
  height: 2000px; }


<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <section id="welcome"></section>
  <header id="header" class="container">
    <nav id="nav">
      <a href="#">One</a>
      <a href="#">Two</a>
      <a href="#">Three</a>
      <a href="#">Four</a> 
    </nav>
  </header>
  <main>
    <section id="about" class="container">
    </section>
  </main>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $(document).scroll(function() {
      var top = $(document).scrollTop();
      var viewport = $("#welcome").height();
      $('#header').toggleClass("fixed", top >= viewport);       
    });
  });
</script>

</body>

Answer 1

可能是jquery切换制作它。

$(document).ready(function() {
    $(document).scroll(function() {
      var top = $(document).scrollTop();
      var viewport = $("#welcome").height();
        if (top >= viewport ) {
            $('#header').addClass("fixed");
        } else if ($('#header').hasClass('fixed')) {
        $('#header').removeClass('fixed')}
    });
  });

http://jsfiddle.net/molo4nik11/zvom6o5w/

Answer 2

我认为这是有效的解决方案。

http://jsfiddle.net/molo4nik11/zvom6o5w/3/

#header {
  background-color: white;
  box-shadow: 4px 4px 4px #888888;
  height: 90px;
  opacity: .93;
  position: relative;
  width: 100%; 
}
#header.fixed {
  position: fixed;
  top: 0;
  width: 100%; 
}

Answer 3

已经很长一段时间了，这不再是一个问题，但当时Chrome没有能够保持这个标题，而不会出现＆＃34;跳跃＆＃34;。我能够通过添加

来修复它

-webkit-transform: translateZ(0);

到.fixed类。虽然这对应用的视觉样式没有任何影响，但使用transform属性会导致chrome将其视为3d元素，并为其投入更多资源。

正如我之前提到的，这似乎不再是一个问题，而且我已经能够删除这个黑客而不会再出现旧问题。

平滑滚动到顶部然后固定/固定浮动元素

3 个答案: