导航跟踪滚动

我正在尝试做一个跟随滚动的导航栏，并在到达另一节时更改活动项目。我试图用scrollNav做到这一点，但我无法让它工作。我首先导入了脚本，为这些部分添加了一个类，并添加了教程中提到的h2。它看起来类似于这样：https://jsfiddle.net/tjyh3smt/5/导航跟踪滚动

但我不明白在什么时候，我应该用类链接导航栏的acctive项目以及如何与这条线初始化插件：

$('.first-bloc').scrollNav();

任何人都可以解释我缺少什么，为什么它不工作？

来源

2015-10-08 dbsso

https://jsfiddle.net/tjyh3smt/3/ – Omidam81

这里是什么，我相信你试图做一个非常简单的例子。

*，并添加上滚动的激活状态，您可以使用白手起家ScrollSpy

function scrollNav() { 
 
    $('.navbar a').click(function() { 
 
    //Toggle Class 
 
    $(".active").removeClass("active"); 
 
    $(this).closest('li').addClass("active"); 
 
    var theClass = $(this).attr("class"); 
 
    $('.' + theClass).parent('li').addClass('active'); 
 
    //Animate 
 
    $('html, body').stop().animate({ 
 
     scrollTop: $($(this).attr('href')).offset().top - 60 
 
    }, 400); 
 
    return false; 
 
    }); 
 
    $('.scrollTop a').scrollTop(); 
 
} 
 
scrollNav();

body, 
 
html { 
 
    margin-top: 60px; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body data-spy="scroll" data-target=".navbar" data-offset="60"> 
 
    <div id="navigation" class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 

 
     </button> <a class="navbar-brand" href="#block-one">Brand</a> 
 

 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#block-one">Block 1</a> 
 

 
      </li> 
 
      <li><a href="#block-two">Block 2</a> 
 

 
      </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#block-three">Block Three</a> 
 

 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <section id="block-one"> 
 
     <h2>Block One</h2>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked 
 
     up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus 
 
     Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line 
 
     in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College 
 
     in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 
 
     1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
 
     comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney 
 
     College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 
 
     and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit 
 
     amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor 
 
     at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes 
 
     from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, 
 
     "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</section> 
 
    <section id="block-two"> 
 
     <h2>Block Two</h2>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked 
 
     up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus 
 
     Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line 
 
     in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College 
 
     in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 
 
     1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
 
     comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney 
 
     College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 
 
     and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit 
 
     amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor 
 
     at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes 
 
     from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, 
 
     "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</section> 
 
    <section id="block-three"> 
 
     <h2>Block Three</h2>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked 
 
     up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus 
 
     Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line 
 
     in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College 
 
     in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 
 
     1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", 
 
     comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney 
 
     College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 
 
     and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit 
 
     amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor 
 
     at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes 
 
     from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, 
 
     "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</section> 
 
    </div> 
 
</body>

来源

2015-10-08 15:03:17 vanburen

感谢这正是我正在寻找和更容易。我唯一想做的事情就是在滚动的同时跟随活动项目，这样做是否可行？ – dbsso

我真的不知道你的意思是“滚动下来的活动项目”。 – vanburen

对不起，我的意思是如何让我的导航栏中的链接在我滚动另一个区块时自动变为“活动”？例如：我在页面顶部：所以，Home（与一个区块相关）处于活动状态，但如果我滚动到区块二，则Home保持活动状态。但它应该是活跃的Link（与bloc-two相关）。你知道我现在的意思吗？ – dbsso

你有两个问题：1）你没有添加jQuery。 2）您没有在文档准备好的活动中添加$('.first-bloc').scrollNav();。

https://jsfiddle.net/tjyh3smt/3/

来源

2015-10-08 14:02:30 Omidam81

所以，我想与其他2集团，这似乎是工作。（https://jsfiddle.net/tjyh3smt/6/）现在我将如何更改“Scroll To”下面的链接来代替我的导航栏的项目？ – dbsso

https://jsfiddle.net/tjyh3smt/7/ – Omidam81

导航跟踪滚动

回答

相关问题