Variable Active Tag On Scroll Navigation

У меня есть 0 знаний с jquery, и я не могу получить этот вставленный jquery с Change Active Menu Item on Page Scroll? работать.Variable Active Tag On Scroll Navigation

var lastId, 
    topMenu = $("#nav"), 
    topMenuHeight = topMenu.outerHeight()+15, 
    menuItems = topMenu.find("a"), 
    scrollItems = menuItems.map(function(){ 
     var item = $($(this).attr("href")); 
     if (item.length) { return item; } 
    }); 
    menuItems.click(function(e){ 
    var href = $(this).attr("href"), 
    offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
    $('html, body').stop().animate({ 
    scrollTop: offsetTop 
    }, 300); 
    e.preventDefault(); 
    }); 
    $(window).scroll(function(){ 
    var fromTop = $(this).scrollTop()+topMenuHeight; 
    var cur = scrollItems.map(function(){ 
    if ($(this).offset().top < fromTop) 
     return this; 
    }); 
    cur = cur[cur.length-1]; 
    var id = cur && cur.length ? cur[0].id : ""; 
    if (lastId !== id) { 
    lastId = id; 
    menuItems 
    .parent().removeClass("active") 
    .end().filter("[href=#"+id+"]").parent().addClass("active"); 
    }     
});

Пожалуйста, помогите мне, это то, что я есть на сайте: http://jsfiddle.net/cL3jA/4/

источник

2013-12-05 user3002203

Вы должны добавить ссылку на библиотеку JQuery, пример

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Обновлено jsFiddle

* * Обновление: Пример в одном файле (Test.html)

<!doctype> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <style> 
      body { 
       background-image: url(../images/noise.png); 
       background-repeat: repeat; 
       width:100%; 
       height: 100%; 
      } 
      #wrapper { 
       float: left; 
       width: 80%; 
       max-width: 960px; 
       background-image: url(../images/white.png); 
       background-repeat: repeat; 
      } 
      #nav { 
       font-family: 'Asap', sans-serif; 
       font-weight: 700; 
       font-size: 20px; 
       position: fixed; 
       left: 0px; 
       top: 20%; 
       list-style-type: none; 
       color: #000; 
      } 
      #nav li { 
       cursor: pointer; 
       width: 100px; 
       margin-bottom: 10px; 
       padding: 3px; 
       text-align: right; 
       -webkit-transition-duration: 0.4s; 
       -moz-transition-duration: 0.4s; 
       -o-transition-duration: 0.4s; 
       transition-duration: 0.4s; 
      } 
      #nav li:hover { 
       width: 120px; 
      } 
      li a { 
       text-decoration: none; 
       color: #000; 
      } 
      li:hover a { 
       color: #CDCDCD; 
      } 
      .active { 
      } 
      .active a { 
       color: #CDCDCD; 
      } 
      .active li { 
       padding-left: 20px; 
      } 
      #hello { 
       width:100%; 
       height: 1000px; 
      } 
      #about { 
       width:100%; 
       height: 1000px; 
      } 
      #yolo { 
       width:100%; 
       height: 1000px; 
      } 
      #swag { 
       width:100%; 
       height: 1000px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="nav"> 
      <ul> 
       <li class="active"><a href="#hello">Hello</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#yolo">Yolo</a></li> 
       <li><a href="#swag">Swag</a></li> 
      </ul> 
     </div> 
     <div id="wrapper"> 
      <div id="hello"> 
       <a id="hello">hello</a> 
      </div> 
      <div id="about"> 
       <a id="about">about</a> 
      </div> 
      <div id="yolo"> 
       <a id="yolo">yolo</a> 
      </div> 
      <div id="swag"> 
       <a id="swag">swag</a> 
      </div> 
     </div> 
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
     <script> 
      var lastId, 
        topMenu = $("#nav"), 
        topMenuHeight = topMenu.outerHeight() + 15, 
        menuItems = topMenu.find("a"), 
        scrollItems = menuItems.map(function() { 
         var item = $($(this).attr("href")); 
         if (item.length) { 
          return item; 
         } 
        }); 
      menuItems.click(function(e) { 
       var href = $(this).attr("href"), 
         offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1; 
       $('html, body').stop().animate({ 
        scrollTop: offsetTop 
       }, 300); 
       e.preventDefault(); 
      }); 
      $(window).scroll(function() { 
       var fromTop = $(this).scrollTop() + topMenuHeight; 
       var cur = scrollItems.map(function() { 
        if ($(this).offset().top < fromTop) 
         return this; 
       }); 
       cur = cur[cur.length - 1]; 
       var id = cur && cur.length ? cur[0].id : ""; 

       if (lastId !== id) { 
        lastId = id; 
        menuItems 
          .parent().removeClass("active") 
          .end().filter("[href=#" + id + "]").parent().addClass("active"); 
       } 
      }); 
     </script> 
    </body> 
</html>

источник

2013-12-05 19:59:36

Большое спасибо, но даже если я добавил, что сейчас в голове, она до сих пор не применяется, даже не сглаженный якорь скроллинг. Я беспомощна. – user3002203

Я скопировал все jsfiddle в пустой html-документ, добавив только эту строку в голову Это все еще не работает, что мне не хватает? – user3002203

Отвечено обновлено, код добавлен для отдельного файла –

Variable Active Tag On Scroll Navigation

ответ

Смежные вопросы