[英]jquery navigation color and height change on scroll
我想在滚动时将导航从透明更改为颜色。 很像这个网站。 http://createone.com/contact-us/我看过关于改变尺寸的帖子很棒,我也会使用它,但我想主要从透明到颜色。 任何帮助都会很棒。 我对jquery有一点经验,但是无法弄明白或者根据我的需要修改别人以前的问题。
我看到了这个但却无法让它为我工作。 jquery在滚动时改变不透明度和高度
一个jsfiddle演示会很棒!
在此先感谢您的帮助。 我也在使用Bootstrap 4,所以如果那里有任何插件。 我也对此持开放态度。
嗨,你可以检查这个开始: http : //jsfiddle.net/rcAev/177/
在这里我做了这个功能:
$(document).ready (function () {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 300) {
$('.overlay').addClass('cambio')
}else {
$('.overlay').removeClass('cambio')
}
})
})
我会一步一步地解释你:
$(window).scroll(function()
var sT = $(this).scrollTop();
第三个比较你想要的断点,在这种情况下我选择300,因为我想在从图像传递高度后更改导航。
if (sT >= 300) { /*action you want after the 300 or more scroll*/ }else { /*action you want before the 300 scroll*/ }
四是改变透明上色我申请的行为是增加一个class
有新的背景和不同的高度:
$('.overlay').addClass('cambio')
在此站点中 ,导航高度实际上并未更改。 这是固定的定位 。 导航相对于浏览器窗口定位。
HTML:
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div id="first"></div><div id="second"></div><div id="third"></div>
CSS:
ul.nav{
position:fixed;
}
div#first{
height:600px;
width:100%;
background:#59071D;
}
div#second{
height:600px;
width:100%;
background:#735448;
}
div#third{
height:600px;
width:100%;
background:#F2DDB6;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.