视差导航菜单
Parallax navigation menu
这是基于这个问题的问题:。
所以我能够让它显示菜单的标题,但我想知道我是否可以更改 css 以在该人位于特定标题上时使菜单有所不同部分。
当前在上一个问题的示例中,它只有一种颜色(蓝色)。我在考虑让它对圆圈产生透明效果,或者改变成不同的颜色让他们知道他们在网页的特定部分。
谢谢!
您可以使用 jQuery 滚动功能来检测您的某个部分何时在视图中,就像这样!
var thisScroll = 0, lastScroll = 0;
$(window).scroll(function(){
//Detect your current scroll position
thisScroll = $(window).scrollTop();
//Loop through each article
$('#content article').each(function(){
//Get the element's distance from top of the viewport, including scroll
var myPos = $(this).offset().top - thisScroll;
//Scrolling down
if(thisScroll > lastScroll){
if(myPos > 0 && myPos < $(window).height()){
console.log($(this).attr('id'));
}
}
//Scrolling up
else{
if(myPos > -$(window).height() && myPos < 0){
console.log($(this).attr('id'));
}
}
});
//If lastScroll is higher than thisScroll, the user must have scrolled up
lastScroll = thisScroll;
});
滚动函数只是检查元素是否在视口内向下滚动(在 0 和屏幕高度之间)。如果向上滚动,比较会翻转,因为偏移量是从元素的顶部开始计算的 - 所以您正在寻找介于 0 和负视口高度之间的任何一个。让我知道这是否有意义!
这是基于这个问题的问题:
所以我能够让它显示菜单的标题,但我想知道我是否可以更改 css 以在该人位于特定标题上时使菜单有所不同部分。
当前在上一个问题的示例中,它只有一种颜色(蓝色)。我在考虑让它对圆圈产生透明效果,或者改变成不同的颜色让他们知道他们在网页的特定部分。
谢谢!
您可以使用 jQuery 滚动功能来检测您的某个部分何时在视图中,就像这样!
var thisScroll = 0, lastScroll = 0;
$(window).scroll(function(){
//Detect your current scroll position
thisScroll = $(window).scrollTop();
//Loop through each article
$('#content article').each(function(){
//Get the element's distance from top of the viewport, including scroll
var myPos = $(this).offset().top - thisScroll;
//Scrolling down
if(thisScroll > lastScroll){
if(myPos > 0 && myPos < $(window).height()){
console.log($(this).attr('id'));
}
}
//Scrolling up
else{
if(myPos > -$(window).height() && myPos < 0){
console.log($(this).attr('id'));
}
}
});
//If lastScroll is higher than thisScroll, the user must have scrolled up
lastScroll = thisScroll;
});
滚动函数只是检查元素是否在视口内向下滚动(在 0 和屏幕高度之间)。如果向上滚动,比较会翻转,因为偏移量是从元素的顶部开始计算的 - 所以您正在寻找介于 0 和负视口高度之间的任何一个。让我知道这是否有意义!