[英]jQuery waypoints and changing waypoints
Only my second question here (so go easy please!). 这只是我的第二个问题(请轻松点!)。
I've been trying to use jQuery waypoints to hide and show a border under my navigation based on scroll position. 我一直在尝试使用jQuery航点来隐藏和显示基于滚动位置的导航下的边框。 For example whilst the sticky nav is over the slider image - there will be no border, however when the nav is scrolling over content, the border will appear.
例如,当粘性导航位于滑块图像上方时-将没有边框,但是当导航在内容上滚动时,将显示边框。
Please see: http://thestylebar.co.uk (inspect element in chrome/safari) 请参阅: http : //thestylebar.co.uk (在chrome / safari中检查元素)
Once the user scrolls to the waypoint the css property is changed however when the user scrolls back up the class doesn't return to its default state how can I amend this? 一旦用户滚动到航路点,css属性就会更改,但是当用户向上滚动时,类不会返回其默认状态,该如何修改呢? Also, the script doesn't seem to work on the homepage?
另外,该脚本似乎在首页上不起作用?
$(function() {
$('.l-main-h').waypoint( // .l-main-h is the content area
function() {
$('.strip').css({"border-bottom":"none"});
}
)
});
You would have to test the direction that waypoints
provides. 您将必须测试
waypoints
提供的方向。 Also, I wouldn't inline CSS like that. 另外,我不会像那样内联CSS。 You should just toggle a class.
您应该只切换一个班级。
This isn't tested but it should get you close. 这未经测试,但它应该使您接近。
$('.l-main-h').waypoint(function(direction) {
$('.strip').toggleClass('bordered', direction === 'down');
});
Then your CSS would be like: 然后您的CSS就像:
.strip.bordered {
border-bottom: 2px solid #fff;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.