1

我正在制作一个具有“时间线”样式的网页，它是水平导航的，但有一个固定菜单，其中包含一个元素，当您单击每个元素时，该元素会沿着条形滑动。

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

现在我也尝试使用原始版本而不进行更改，但该功能仍然无法正常工作。

我提前感谢你们。

4

0 回答 0