[英]List Item Position Not Change On Scroll
i am using javascript to shrink my logo on scroll down and extent on scroll up for this i using jquery function addClass and removeClass but i am getting some troubles please check and help me out from this 我正在使用javascript来缩小我的徽标在向下滚动和在向上滚动的范围上为此我使用jQuery函数addClass和removeClass,但是我遇到了一些麻烦,请检查并帮助我
1) logo is extend first then top_nav 1)徽标先扩展,然后再扩展top_nav
2) list items position is not changing 2)列表项位置不变
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(function(){
var navStatesInPixelHeight = [65,90];
var changeNavState = function(nav, newStateIndex) {
nav.data('state', newStateIndex).stop().animate({
height : navStatesInPixelHeight[newStateIndex] + 'px'
}, 600);
};
var boolToStateIndex = function(bool) {
return bool * 1;
};
var maybeChangeNavState = function(nav, condState) {
var navState = nav.data('state');
if (navState === condState) {
changeNavState(nav, boolToStateIndex(!navState));
}
};
$('.top_nav').data('state', 1);
$(window).scroll(function(){
var $nav = $('.top_nav');
if ($(document).scrollTop() > 0) {
$('.contact_details').hide();
$nav.addClass('fixed-nav');
$nav.addClass('fixed-navbar');
$('.top_nav').css('background-color','rgba(33,33,33,1.0)');
maybeChangeNavState($nav, 1);
} else {
$('.contact_details').show();
$nav.removeClass('fixed-nav');
$nav.removeClass('fixed-navbar');
$('.top_nav').css('background-color','rgba(0,0,0,.5)');
maybeChangeNavState($nav, 0);
}
});
});
<header>
<div class="top_nav">
<div class="logo">
<a id="site-logo" href="#"><img src="http://www.robinwhale.co.uk/pages/wisdom/sigs_files/google-logo.jpg" alt="LOGO"></a>
</div>
<div class="contact_details">
<p>Need Help, Call: +92 445676654 |<a href="#"> Mail</a></p>
</div>
<div class="nav_bar">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Solution</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</header>
<div class="container">
</div>
*{
margin: 0;
padding: 0;
}
/* Top Menu Start Here */
.top_nav{
height: 90px;
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.top_nav .logo{
margin-top: 2px;
margin-left: 20px;
height: 85px;
width: 200px;
float: left;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease
}
.top_nav .logo a img{
height: 100%;
width: 100%;
}
.contact_details{
margin-top: 5px;
margin-left: 1115px;
min-height: 25px;
min-width: 230px;
float: right;
color: #fff;
position: absolute;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.contact_details p{
font-size: 14px;
text-align: center;
}
.contact_details p a{
text-decoration: none;
color: #fff;
}
.nav_bar{
margin-left: 700px;
margin-top: 55px;
position: fixed;
}
.nav_bar ul{
list-style-type: none;
}
.nav_bar ul li{
display: inline-block;
text-align: center;
float: left;
}
.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
position: relative;
}
.nav_bar ul li a::after{
content: '';
display: inline-block;
position:absolute;
width: 0px;
height: 5px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #ff6600;
transition: width .4s;
}
.nav_bar ul li a:hover::after{
width: 100%;
}
/* After Scroll */
.fixed-navbar{
margin-left: 100px;
margin-top: 30px;
position: fixed;
}
.fixed-nav .logo {
height: 60px;
width: 160px;
}
.fixed-nav .logo img {
height: 100% !important;
}
.top_nav .logo a img {
transition:all 0.7s ease;
}
I am not much aware about transition css you have written , but you can fix your issue by animating .logo
height and width as well as top margin of .nav_bar
along with .top_nav
我不太了解您编写的过渡CSS,但是您可以通过将
.logo
高度和宽度以及.nav_bar
和.top_nav
上边距设置动画来解决问题。
Remove CSS 删除CSS
.fixed-nav .logo {
height: 60px;
width: 160px;
}
Along with animating .top_nav animate logo and nav bar in changeNavState function 以及在changeNavState函数中对.top_nav动画徽标和导航栏进行动画处理
var navStatesInPixelHeight = [65,90];
var newStateLogoPixelHeight = [60,85];
var newStateLogoPixelWidth = [160,200];
var newStateNavBarPixelTopMargin = [35,55];
var changeNavState = function(nav, newStateIndex) {
nav.data('state', newStateIndex).stop().animate({
height : navStatesInPixelHeight[newStateIndex] + 'px',
},600);
$('.logo').animate({
height :newStateLogoPixelHeight[newStateIndex]+'px',
width: newStateLogoPixelWidth[newStateIndex]+'px',
}, 600);
$('.nav_bar').animate({
marginTop : newStateNavBarPixelTopMargin[newStateIndex]+'px'
},1200 );
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.