我正在制作一个具有“时间线”风格的网页,它是水平导航的,但是有一个固定的菜单,当你点击每个元素时,该元素会沿着条形滑动。
现在我正在使用垂直时间轴的蓝图,当您通过正常滚动来到元素时,该蓝图也会将元素移动到条形图上 http://www.webdesigncrowd.com/demo/slider-timeline-menu-12.2.13/
现在,我使用页面换行div将元素保持在某个边界内,并使用css样式使主体水平堆叠元素。 当我点击它时,它会将我带到正常的正确页面,并且bar元素按预期工作,但当链接元素移动到视图中时,它的功能似乎不再起作用
这是原始的JS代码
// Scroll Spy
$(window).scroll(function() {
var top = $(window).scrollTop() + 100; // Take into account height of fixed menu
$(".container").each(function() {
var c_top = $(this).offset().top;
var c_bot = c_top + $(this).height();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((top > c_top) && (top < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
} else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a").slideToPos();
}
}
});
});
这就是我编辑的目的,试图让它在水平显示器上工作。
// Scroll Spy
$(window).scroll(function() {
var left = $(window).scrollLeft() + 1300; // Take into account height of fixed menu
$(".container").each(function() {
var c_Left = $(this).offset().left;
var c_bot = c_left + $(this).width();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((left > c_Left) && (left < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
} else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a .navut").slideToPos();
}
}
});
});
现在我已尝试使用原始版本而不做任何更改,但该功能仍无效。
我提前感谢你们。