0
我有一個菜單，看起來像這樣：動畫也不回原
當我向下滾動，我想標誌消失。我試圖用jQuery中的滾動功能來實現這一點。
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語句實現這一點，請參閱上面的代碼。
第一部分成功完成，但其他部分出現問題。當我回捲起來，這是IMMAGE我得到：
我的整個代碼，包括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
記住第一部分是做我想做的事情（當你向下滾動時），但是當它回到頂端並且這沒有發生時它需要返回到其原始狀態。爲什麼是這樣？
沒有，因爲給它px給我一個錯誤意想不到的標識符 –
也寬度200仍然不到原始位置看截圖http://prntscr.com/earx6c –
你需要做的同樣填充也 –