Question

我看了整个网络，可能不够好，我正在寻找这个，我想要一个div，前100px，当我向下滚动一点时，它必须动画到顶部并保持粘性和反向，所以向上滚动动画到顶部100px。

我如何实现这一目标？

Answer 1

这是在向下滚动时将div词缀设置为顶部的代码片段，当向下滚动到顶部时向下反转

＆＃13;

    body {
      position: relative;
    }
    
    .affix {
      top: 0;
      width: 100%;
      
      -webkit-transition: top 0.5s ease-in-out;
      -webkit-transition-delay: 0.5s;
      transition: top 0.5s ease-in-out;
      transition-delay: 0.5s;
      z-index: 9999 !important;
    }
    
    .navbar {
      margin-bottom: 0px;
    }
    
    nav {
      top:100px;
      -webkit-transition: top 1s ease-in-out;
      -webkit-transition-delay: 0.5s;
      transition: top 1s ease-in-out;
      transition-delay: 0.5s;
    }
    
    .affix ~ .container-fluid {
      position: relative;
      top: 50px;
    }
    
    #section1 {
      padding-top: 50px;
      height: 10px;
      color: #fff;
      background-color: #fff;
    }
    
    #section2 {
      padding-top: 50px;
      height: 500px;
      color: #fff;
      background-color: #673ab7;
    }
    
    #section3 {
      padding-top: 50px;
      height: 500px;
      color: #fff;
      background-color: #ff9800;
    }
    
    #section41 {
      padding-top: 50px;
      height: 500px;
      color: #fff;
      background-color: #00bcd4;
    }
    
    #section42 {
      padding-top: 50px;
      height: 500px;
      color: #fff;
      background-color: #009688;
    }

＆＃13;

  <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>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

  <div class="container-fluid" style="height:100px;">
    <img height="222" width="100%" src="https://bgcdn.s3.amazonaws.com/wp-content/uploads/2013/04/5-2-God-is-in-Nature.jpg" alt="image">
  </div>

  <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

  </nav>

  <div id="section1" class="container-fluid">

    
  </div>
  <div id="section2" class="container-fluid">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="container-fluid">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section41" class="container-fluid">
    <h1>Section 4 Submenu 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section42" class="container-fluid">
    <h1>Section 4 Submenu 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>

</body>

＆＃13;

以下是同一https://plnkr.co/edit/hTIXunKUjRtSE2kvsI2l?p=preview

的plunker链接

我希望它适合你。

在向下滚动时将div词缀设置为顶部动画

1 个答案: