javascript - jQuery magicLine 垂直滑动

Question

我使用 jQuery MagicLine 作为垂直滑动。我希望它是这样的，当我点击菜单时，该行将停留在该菜单项上，而不是像往常一样回到第一个菜单项。而且每当点击页面的向下箭头时，magicline 应该相应地工作。请指教。这是我的代码:

$(document).ready(function() {
  magicline();
});

$(document).ready(function() {
			  $('a[href*=#]').each(function() {
			    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
			    && location.hostname == this.hostname
			    && this.hash.replace(/#/,'') ) {
			      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
			      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
			       if ($target) {
			         var targetOffset = $target.offset().top;
			
					<!----- JQUERY CLICK FUNCTION REMOVE AND ADD CLASS "ACTIVE" + SCROLL TO THE #DIV--->   
			         $(this).click(function() {
						$("#nav_menu li a").removeClass("active");
						$(this).addClass('active');
			           $('html, body').animate({scrollTop: targetOffset}, 1000);
			           return false;
			         });
			      }
			    }
			  });
			
			
			});


function magicline() {
  var $el, topPos, newHeight,
    $mainNav = $("#nav_menu");
  //$("#magic_line").remove();
  $mainNav.append("<li id='magic_line'></li>");
  var $magicLine = $("#magic_line");

  $magicLine
    .height($(".current_page_item").height())
    .css("top", $(".current_page_item a").position().top)
    .data("origTop", $magicLine.position().top)
    .data("origHeight", $magicLine.height());

  $("#nav_menu li").find("a").hover(function() {
    $el = $(this);
    topPos = $el.position().top;
    newHeight = $el.parent().height();
    $magicLine.stop().animate({
      top: topPos,
      height: newHeight
    });
  }, function() {
    $magicLine.stop().animate({
      top: $magicLine.data("origTop"),
      height: $magicLine.data("origHeight")
    });
  });
}

$('#nav_menu li a').bind('click', function() {
  $('#nav_menu li').each(function() {
    $(this).removeClass('current_page_item');
  });
  $(this).parent().addClass('current_page_item');
  magicline();
});

nav#nav_wrap {
  position: fixed;
  z-index: 5000;
  top: 40vh;
  right: 15px;
  padding-left: 10px;
  background: url(images/navbg.png) no-repeat left;
}
li{ list-style: none; }
nav#nav_wrap ul {
  width: 115px;
}
nav#nav_wrap ul li {
  margin-bottom: 10px;
}
nav#nav_wrap ul li a {
  color: #fff;
}
nav#nav_wrap ul li a.dot:hover,
nav#nav_wrap ul li a.dot:active {
  background: #52C6C0;
}
nav#nav_wrap .dot.active {
  background: #52C6C0;
}
nav#nav_wrap .dot {
  background: #005F59;
  width: 16px;
  height: 16px;
  display: block;
  border: 2px solid #fff;
}
.menu_title {
  margin-left: 22px;
}
#magic_line {
  position: absolute;
  top: 5px;
  left: 0;
  width: 2px;
  height: 142px;
  background: url(images/marker.png) no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav id="nav_wrap" class="nav-wrap">
  <ul class="group navigation" id="nav_menu">
    <li class="current_page_item">
      <a href="#home" class="dot active">
        <div class="menu_title">Home</div>
      </a>
    </li>
    <li>
      <a href="#about" class="dot">
        <div class="menu_title">About</div>
      </a>
    </li>
    <li>
      <a href="#services" class="dot">
        <div class="menu_title">Services</div>
      </a>
    </li>
    <li>
      <a href="#portfolio" class="dot">
        <div class="menu_title">Media</div>
      </a>
    </li>
    <li>
      <a href="#contact" class="dot">
        <div class="menu_title">Contact</div>
      </a>
    </li>
  </ul>
</nav>

感谢您的帮助。

编辑:这是一个有效的 JSFiddle。 http://jsfiddle.net/9cg5bqxw/

Answer 1

不可能获得 50 个代表(现在几天都停留在 49 哈哈)，所以这还不是答案，而是评论。

请详细说明你想做什么，这对我来说并不清楚，代码片段或 JS Fiddle 都不清楚你的要求。

您是否有来自某人的工作示例，因为:

when I click the menus, the line will be staying at that menu item, and not go back to the first one as usual.And also whenever a click on the down arrow of the page, magicline should work accordingly.

对于您要实现的目标并没有真正清晰的解释。

编辑:我想这就是您要找的:http://jsfiddle.net/xfba1403/8/

出了什么问题:

一些事情出了问题:

• 您忘记添加“悬停”功能:

  $("#nav_menu li a").hover(function() {
$el = $(this);
topPos = $el.position().top;
newHeight = $el.parent().height();
$magicLine.stop().animate({
top: topPos,
height: newHeight
});
}, function() {
$magicLine.stop().animate({
top: $magicLine.data("origTop"),
height: $magicLine.data("origHeight")
});<br/>
});

• 您正在使用的图像，也许可以在您的电脑上使用，但不能在 jsfiddle 上使用，所以我将其更改为颜色:

  #magic_line {
position: absolute;
color: black;
top: 5px;
left: 0;
width: 5px;
background-color: #fe4902;
}

*我因重复/奇怪使用而编辑的内容:*

• 您使用了 $(document).ready(function(){ // code });出于某种原因两次。

小费

我建议你开始使用 Bootstrap，它是制作标准网站最常用的库，在你构建了一个很棒的 Alpha 之后你可以轻松地编辑它:)

引用:http://getbootstrap.com/