间谍滚动问题

时间:2014-10-21 11:35:02

标签: scroll timeline scrollspy

我正在制作一个具有“时间线”风格的网页,它是水平导航的,但是有一个固定的菜单,当你点击每个元素时,该元素会沿着条形滑动。

现在我正在使用垂直时间轴的蓝图,当您通过正常滚动来到元素时,该蓝图也会将元素移动到条形图上 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();
       }
     }
   });
 });

现在我已尝试使用原始版本而不做任何更改,但该功能仍无效。

我提前感谢你们。

0 个答案:

没有答案