动画div的顶部向下滚动

-1

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

我该如何做到这一点？

来源

2017-02-10 Bas

请提供你的问题的正确解释。 –

您能否提供图片或代码以供参考？ –

为什么downvoting ?! – Bas

下面是代码片段动画格粘贴下来顶部滚动时与反向时滚动回顶部

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; 
 
    }

<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>

这里是一个plunker链接相同https://plnkr.co/edit/hTIXunKUjRtSE2kvsI2l?p=preview

我希望它为你工作。

来源

2017-02-10 10:10:18

请让我知道它是否工作或任何问题@Bas –

哇，几乎Pooja！如果我向下滚动，websitename就会向上移动，当它在上面时会向下并向上移动。是否有可能当你向下滚动，直接，websitename div上移动画？ en当你回到开始点，前100名。 – Bas

是的，通过删除转换和转换延迟css的导航像这样https://plnkr.co/edit/Tq2WTNbETj23QyYeLagY?p=preview –

动画div的顶部向下滚动

回答

相关问题