我制作了一个固定在顶部的简单导航栏。 最初，当位于顶部时，我希望 Logo 稍大一些，然后向下滚动使其自身过渡到导航栏。
当滚动回到顶部时，我希望 Logo 重新出现。
非常感谢任何帮助或提示!
这是我迄今为止所拥有的代码；标志是椭圆形的，所以我用 bat 侠作为例子:
http://codepen.io/anon/pen/NRzWXk
HTML:
<nav>
<div id="nav_wrapper">
<ul>
<li><a href="#">One</a>
</li>
<li><a href="#">Two</a>
</li>
<li><a href="#">Three</a>
</li>
<li><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li>
<li><a href="#">Four</a>
</li>
<li><a href="#">Five</a>
</li>
<li><a href="#">Six</a></li>
</ul>
</div>
</nav>
CSS:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
最佳答案
希望您正在寻找这样的东西
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll >= 300) {
//clearHeader, not clearheader - caps H
$("#nav_wrapper").addClass("scrolled");
}
else{
$("#nav_wrapper").removeClass("scrolled");
}
});html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #d7d2c4;
height: 1000px;
}
nav {
background-color: #704e46;
top: 0;
position: fixed;
width: 100%;
}
#nav_wrapper {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 15px;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: background-color 0.5s; /* Safari */
transition: background-color 0.5s;
}
nav ul li:hover {
background-color: #5d4037;
cursor: pointer;
}
nav ul li:hover a{
color: whitesmoke;
}
.logo {
padding: 50px;
transition: all ease-in .25s;
margin-bottom: -30px
}
.logo img{
transform : scale(3);
transition: all ease-in .25s;
}
.scrolled .logo{
padding: 15px;
}
.scrolled .logo img{
transform : scale(1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Camping Santa Lucia </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav>
<div id="nav_wrapper">
<ul>
<li><a href="#">One</a>
</li><li><a href="#">Two</a>
</li><li><a href="#">Three</a>
</li><li class="logo"><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">
</li><li><a href="#">Four</a>
</li><li><a href="#">Five</a>
</li><li><a href="#">Six</a></li>
</ul>
</div>
</nav>
</body>
</html>关于javascript - 向下滚动时添加到居中导航栏图标/ Logo /图像的过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34729250/