Question

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

＆＃13;

$(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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

感谢您的帮助。

修改： 这是一个有效的JSFiddle。 http://jsfiddle.net/9cg5bqxw/

Answer 1

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

请详细说明你想要做什么，这对我来说并不清楚，而且片段或JS小提琴都不清楚你的要求。

你是否有某人的工作实例，因为：

当我点击菜单时，该行将停留在该菜单项上，而不是像往常一样回到第一个。并且无论何时点击页面的向下箭头，magicline应该相应地工作。

对你想要完成的事情并不是一个明确的解释。

修改： 我认为这就是你要找的东西：http://jsfiddle.net/xfba1403/8/

出了什么问题：

出现了一些问题：

您忘记添加“on hover”功能：

$("#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") }); });
您正在使用的图像可能适用于您的电脑，但不适用于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/

Answer 2

@Jp Houten ...你的答案是对的。但这对我有用。感谢。

＆＃13;

getView()

＆＃13;

jQuery magicLine垂直滑动

2 个答案: