[英]Adding a css-class to a div when scrolling down
I would like to add a css-class (.shrink) to a menu-bar (#secondary-menu) in a Bootstrap 3 website with LESS, when the menu reaches a top-margin position of 75px while scrolling down. 我想在带有LESS的Bootstrap 3网站中的菜单栏(#secondary-menu)中添加一个css类(.shrink),当菜单向下滚动时达到75px的顶部位置时。 The menu-bar stays fixed at 75px using sticky.js .
菜单栏使用sticky.js固定为75px。 However, I would like to change it's appearance with the shrink-class.
但是,我想通过收缩类更改其外观。
Unfortunately, I don't get my jQuery code working in the current form. 不幸的是,我没有以当前形式使用我的jQuery代码。 The shrink-class is constantly applied.
收缩类是不断应用的。 On its own, the CSS-classes work.
CSS类单独起作用。
HTML: HTML:
<!-- service-nav -->
<div id="service-nav" class="shrink">
<div class="container-fluid">
<div class="container text-center">
<ul class="list-inline">
<li><i class="fa fa-camera-retro fa-3x"></i><p>Test</p></li>
<li><i class="fa fa-asterisk fa-3x"></i><p>Test</p></li>
<li><i class="fa fa-comment fa-3x"></i><p>Test</p></li>
<li><i class="fa fa-search fa-3x"></i><p>Test</p></li>
<li><i class="fa fa-rocket fa-3x"></i><p>Test</p></li>
<li><i class="fa fa-star fa-3x"></i><p>Test</p></li>
</ul>
</div>
</div>
</div><!-- /.service-nav -->
LESS: 减:
#service-nav {
background: #000;
width: 100%;
li {
padding: 40px 60px 25px 60px;
color: #808080;
}
i {
display: block;
}
p {
font-size: 16px;
padding-top: 15px;
letter-spacing: 1px;
}
@shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.5);
.box-shadow(@shadow);
}
.shrink {
li {
padding: 0px 0px 0px 0px;
}
i {
font-size: 30px;
}
p {
display: none;
}
}
jQuery jQuery的
$(window).scroll(function() {
$("#service-nav").removeClass("shrink");
var scroll = $(window).scrollTop();
if (scroll <= 75) {
$("#service-nav").addClass("shrink");
}
}
You are missing closing bracket );
您缺少右括号
);
. 。 Should be:
应该:
$(window).scroll(function() {
$("#service-nav").removeClass("shrink");
var scroll = $(window).scrollTop();
if (scroll <= 75) {
$("#service-nav").addClass("shrink");
}
});
Try this 尝试这个
$(window).scroll(function () {
var a = $('#service-nav');
var p = a.offset().top;
var q = $(window).scrollTop();
var r = $('#service-nav').parent().offset().top;
if (p - q < 75) {
a.addClass("shrink");
} else {
if (p - r < 75) {
a.removeClass("shrink");
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.