Question

如何创建一个位于标题顶部的BClass，但在向下滚动时标题将保持在顶部时会消失。这应该是它的样子：

Answer 1

请使用您的代码清楚说明您的问题。您的应用程序是否支持bootstrap（https://getbootstrap.com/components/#navbar）？

你想要这样的东西吗？我有相同的截图。 http://plnkr.co/edit/gETDDsIiqZXpFa9YtmE5?p=preview

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
  </style>
</head>
<body>

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:100px;">
  <h1>Wallpaper</h1>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="navbar-header">
      <a class="navbar-brand" href="#">Header</a>
    </div>

</nav>

<div class="container-fluid" style="height:1000px">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum, quam vitae congue finibus, mi nulla accumsan tortor, sed lacinia quam purus non eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
      Donec sapien est, aliquam et est vitae, iaculis varius orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed augue augue. Fusce ac felis non risus cursus iaculis id quis justo. Praesent in velit
      accumsan, tincidunt nisi non, finibus justo. Maecenas aliquam elit neque, et mollis erat accumsan at. Ut a mauris in erat accumsan facilisis.
    </p>
    <p>Aliquam fringilla semper elit ut convallis. Fusce bibendum ornare felis sit amet fermentum. Nunc quis auctor nibh. Proin viverra, sem vitae posuere semper, erat quam molestie leo, sit amet posuere mi nisl non nibh. Etiam auctor luctus diam ut interdum.
      Duis erat velit, ultrices in nibh id, molestie lacinia metus. Suspendisse quam est, ultrices ac mi eu, auctor vulputate diam. Vestibulum consequat enim vitae fringilla dapibus.</p>
    <p>Ut ut lobortis est, eu tempus justo. Morbi venenatis velit eget auctor fermentum. Ut auctor non mauris in tincidunt. Sed gravida mauris vel mattis aliquet. Vestibulum semper ipsum placerat, congue massa at, vehicula nibh. Pellentesque tincidunt, lorem
      at luctus gravida, diam turpis iaculis mauris, nec venenatis lacus odio vitae elit. Integer ullamcorper sagittis ipsum, ac aliquet mauris tempus at. Nam imperdiet, orci vel tincidunt semper, purus nibh bibendum risus, ac pretium felis dui sed justo.
      Nunc consectetur venenatis neque, sed sodales lacus egestas nec. Praesent convallis facilisis facilisis. Quisque eget dui faucibus, interdum dolor eu, imperdiet sem. Donec quis ante in dolor accumsan convallis. Donec vel justo ac mauris fermentum
      vulputate. Curabitur vel nibh quis nisi fermentum hendrerit vitae in ipsum. Sed consectetur purus tristique ante vulputate ultrices.</p>
    <p>Donec ut sapien nec massa cursus viverra ut at lectus. Pellentesque pellentesque, eros quis venenatis mollis, mi ligula aliquam arcu, sed hendrerit velit nulla efficitur massa. Phasellus laoreet risus nec dictum ultrices. Nam posuere porttitor condimentum.
      Donec accumsan elit et tortor blandit, a tristique erat porttitor. In quis tincidunt arcu, id semper ex. Suspendisse rutrum sed neque eget dapibus. Pellentesque a urna non urna accumsan feugiat a sed metus. Donec consequat luctus ullamcorper.</p>
    <p>Aenean viverra ipsum non lorem laoreet, id feugiat leo volutpat. Ut ex erat, cursus non ullamcorper sit amet, ullamcorper sed ante. Curabitur ultricies, magna ac accumsan dictum, odio felis mollis enim, et ultricies arcu justo vel nisi. Suspendisse
      potenti. Vivamus elit turpis, scelerisque vitae elit vitae, aliquet viverra purus. Phasellus finibus, mauris vel facilisis interdum, ante nisl ullamcorper felis, feugiat hendrerit arcu mi a est. In ut metus a ligula ultrices tincidunt. Praesent
      ullamcorper sem sapien, ac condimentum erat pellentesque a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum est et massa venenatis interdum. Quisque convallis finibus lectus vitae semper. Vivamus pharetra lacus sed nulla blandit,
      sollicitudin semper velit auctor. Sed erat enim, aliquet at massa et, dignissim sodales lorem. Aliquam erat volutpat. Cras euismod ligula vitae sollicitudin posuere.</p>
</div>

</body>
</html>

Answer 2

我和我一起玩了几分钟，我觉得我应该按照你想要的方式工作。这个例子是建立在bootstrap之上的，但是shuld能够在大多数情况下使用它。 Jsfiddle

jquery的

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

CSS

nav.navbar{
  top:30px;
  background-color:#ccc;
   // Animation
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

nav.navbar.shrink {
top:0px;
}

Answer 3

如果需要，这是完整的代码，只需

<!DOCTYPE html>
<html>
<head>

    <script>
    $(window).scroll(function() {
     if ($(document).scrollTop() > 50) {
       $('nav').addClass('shrink');
     } else {
       $('nav').removeClass('shrink');
     }
    });
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <style>
    nav.navbar{
     top:50px;
     background-color:#ccc;
      // Animation
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease;
    }

    nav.navbar.shrink {
    top:0px;
    }

    </style>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <title></title>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <strong>Navigation bar</strong>
        </div>
    </nav><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

划过固定标题

3 个答案: