动画没有回归原创

时间：2017-02-19 16:10:07

标签： jquery html css

我有一个看起来像这样的菜单：

enter image description here

当我向下滚动时，我希望徽标消失。我尝试用jquery中的scroll函数实现它。

jQuery代码如下所示：

$(window).scroll(function(){
  if ($(document).scrollTop() > 100) {
    $('.logo').animate({marginTop: -500, width:5, padding:0},'fast');
    $('.navigation').css('background-color','rgba(0, 0, 0, 0.59)');
  } else {
    $('.logo').animate({marginTop: 0, width:5, padding:0},'fast');
    $('.navigation').css('background-color','rgba(0, 0, 0, 0.59)');
  }
})

我还想要当我回到顶部时它返回到我的原始值。我尝试使用else语句实现这一点，请参阅上面的代码。

第一部分是成功实现的，但在其他部分出了问题。当我向后滚动时，这是我得到的影像：

enter image description here

我的整个代码包括html和css：

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--general stuff --> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
    <!-- custom css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--custom css-->
    <link href="css/custom.css" rel="stylesheet">
    <!--slider-->
    <link rel="stylesheet" type="text/css" href="slider/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slider/slick/slick-theme.css"/>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  </head>

  <body>

    <div class="navigation">  
      <ul>
          <li><a>Home</a></li>
          <li><a>About me</a></li>
          <li class= 'logo'><img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/ff8f6032715585.569069e7a9b6c.png"></li>
          <li><a>Home</a></li>
          <li><a>About me</a></li>
      </ul>
    </div>

    <div class="slider">
      <div class="slide"><img src="https://dailypost.files.wordpress.com/2016/06/city.jpeg?w=1200"></div>
      <div class="slide"><img src="http://www.wheretowillie.com/wp-content/uploads/2012/12/Glow-of-the-Windy-City-2.jpg"></div>
    </div>

    <p style = "overflow:hidden;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida laoreet libero, ac ornare lorem ultrices non. Cras viverra elit nisl, in facilisis ligula sagittis maximus. Nam porta libero quis sapien dignissim tristique. Duis semper felis eu lorem fringilla dignissim. Etiam cursus felis a lobortis posuere. Pellentesque eu tincidunt velit. Maecenas eget aliquet ipsum, id tempor ex. Quisque bibendum odio vel odio volutpat commodo. Sed vitae tellus nulla. Etiam elementum erat vitae eros euismod, et ultrices velit aliquam. Sed elementum dictum tortor vitae fermentum. Duis rhoncus felis turpis, non facilisis felis mattis a. Maecenas dolor nisi, venenatis sit amet sodales ornare, varius ac orci. Praesent pellentesque imperdiet sollicitudin. Aenean pellentesque velit tortor, porttitor fringilla justo dictum nec.

Vestibulum in tincidunt odio. Nam pharetra urna eget tellus luctus tincidunt. Cras posuere, lacus id sodales facilisis, libero dui interdum odio, et molestie augue erat at leo. Etiam pretium aliquet justo. Morbi id metus a diam ultricies dapibus. Aenean a ante nec eros blandit dignissim. Morbi purus ante, eleifend non viverra ultricies, auctor dignissim mauris. Aliquam rutrum risus nibh, eget eleifend enim aliquam nec. Integer nec eleifend diam, eget cursus leo. In non finibus nulla, a cursus diam. Mauris bibendum condimentum suscipit.

Nam quis enim felis. Phasellus molestie quam at velit aliquet euismod. Curabitur ac justo quis leo viverra ultrices. Vestibulum sit amet purus id sem rutrum vehicula et sed ante. Maecenas finibus, augue ut faucibus hendrerit, leo nisi tristique purus, sed congue ante sapien in arcu. Phasellus dignissim turpis ex, id porta ipsum pellentesque ac. Mauris ac sapien hendrerit, vestibulum risus id, gravida ligula. Proin laoreet aliquet ante, id viverra felis tincidunt euismod. Duis eu urna et massa convallis ultricies. Aenean consectetur lectus eu ipsum vestibulum, eget imperdiet tellus faucibus. Pellentesque tincidunt nunc tincidunt ex tincidunt, quis hendrerit lorem lobortis. Vivamus congue, nibh sit amet consectetur ornare, eros turpis sodales sem, in consequat dui dolor ac eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id efficitur elit. Donec posuere varius metus at molestie. Morbi sit amet velit dui. Integer eget iaculis nibh. Vivamus diam purus, posuere a leo ultricies, tempus tempor lacus. Proin vestibulum eros a sapien aliquam mollis sit amet at lacus. Donec at congue risus, non ullamcorper mi. Integer finibus ligula porttitor, eleifend eros eget, luctus libero. Nulla erat odio, ultrices eget velit vitae, rhoncus tristique dolor. In nulla mi, laoreet sit amet libero sed, auctor efficitur metus. Sed gravida lorem sed sagittis sagittis. Etiam et ante vehicula lectus dictum consequat. Duis porttitor dolor sed libero mattis, sed malesuada nisl facilisis.

Integer pretium mi eu sagittis laoreet. Mauris euismod ac odio sed viverra. Curabitur vitae nulla in ex ultrices mollis at imperdiet massa. Donec venenatis, nisl non convallis cursus, augue leo consequat massa, a volutpat enim urna vel nibh. Aenean mattis fringilla lectus, tristique commodo ante convallis ac. Ut dui magna, dapibus eget elit eget, sodales iaculis turpis. Ut posuere tincidunt felis, id pretium nisi blandit mattis. Sed sed nisi id quam vestibulum aliquam vitae lobortis odio. Praesent porttitor leo id lacus posuere tristique. Sed sodales ultricies dapibus. Nam at molestie massa.
    </p>

    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!--slick slider-->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slider/slick/slick.min.js"></script>
    <!-- custom js -->
    <script src="js/custom.js"></script>
  </body>
</html>

的CSS：

* {
  padding: 0;
  margin: 0;
}

body {
  position: relative;
}

/*Navigation section*/

.navigation {
  width: 100%;
  padding: 25px 0;
  background: transparent;
  position: fixed;
  z-index: 1;
  display: flex;

}
.navigation ul {
  list-style: none;
  padding: 0;
  display: block;
  margin: 0 auto;
}
.navigation ul li {
  display: inline-block;
  vertical-align: middle;
  padding-left:20px;
  padding-right:20px;
  cursor:pointer;
}

.navigation ul li a {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color:white;
}

.navigation li img {
  width: 200px;
  height: 180px;
  z-index: 2;
  margin-left:50px;
  margin-right:50px;
}
/*The slider*/

.slick-slide {
  width: 100%;
  height: 100vh!important;
}
.slide img {
  width: 100%;
  height: 100%;
}

可在此website

上找到实时版本

记住第一部分正在做我想要的（当你向下滚动时），但是当我回到顶部并且这不会发生时它需要返回到它的原始状态。这是为什么？

2 个答案:

答案 0 :(得分：1)

脚本中的问题是width:5：当你向上滚动时它保持宽度为5px（你在else子句中也有它），所以它实际上是隐藏的。只需将其重置为else子句中的初始值即可。

答案 1 :(得分：1)

您没有重置宽度（或填充）

$(window).scroll(function(){
  if ($(document).scrollTop() > 100) {
    $('.logo').animate({marginTop: -500, width:5px, padding:0},'fast');
    $('.navigation').css('background-color','rgba(0, 0, 0, 0.59)');
  } else {
    $('.logo').animate({marginTop: 0, width:200px, padding:0},'fast');
    $('.navigation').css('background-color','rgba(0, 0, 0, 0.59)');
  }
})

更好的方法是设置scale属性的动画，因为宽度/填充不能很好地生成动画 - 超出了你的问题的范围。

你应该还有“px”......

相关问题
最新问题