gpt4 book ai didi

javascript - 向下滚动时添加到居中导航栏图标/ Logo /图像的过渡

转载 作者:行者123 更新时间:2023-11-28 06:30:43 24 4
gpt4 key购买 nike

我制作了一个固定在顶部的简单导航栏。最初,当位于顶部时,我希望 Logo 稍大一些,然后向下滚动使其自身过渡到导航栏。

当滚动回到顶部时,我希望 Logo 重新出现。

非常感谢任何帮助或提示!

Not scrolled

Scrolled down

这是我迄今为止所拥有的代码;标志是椭圆形的,所以我用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com