Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Доработать простой скрипт

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Скрипт по добавлению класса active при прокрутке страницы
Поиск в теме | Версия для печати
Айратиус
Отправлено: 12 Ноября, 2014 - 12:11:19
Post Id



Частый гость


Покинул форум
Сообщений всего: 192
Дата рег-ции: Нояб. 2012  
Откуда: Россия


Помог: 0 раз(а)
Всем доброго дня. Данный скрипт изменяет пункт меню по якорю. якорь в HTML задан следующим образом.
CODE (html):
скопировать код в буфер обмена
  1. <li><a href="#foo">Foo</a></li>

но если ссылка типа такого, то уже не работает скрипт
CODE (html):
скопировать код в буфер обмена
  1. <li><a href="index.php#foo">Foo</a></li>


Пожалуйста допишите JS код. В нем вообще не соображаю.
Вместо index.php может быть абсолютно любая страница, но при этом скрипт должен работать корректно.

Вот источник http://jsfiddle[dot]net/mekwall/up4nu/

А вот мой код полностью




CODE (htmlphp):
скопировать код в буфер обмена
  1. <!doctype html><head>
  2.  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
  3. </head>
  4.  
  5. <style>
  6. body {
  7.    height: 6000px;
  8.    font-family: Helvetica, Arial;
  9. }
  10.  
  11. #top-menu {
  12.    position: fixed;
  13.    z-index: 1;
  14.    background: white;
  15.    left: 0;
  16.    right: 0;
  17.    top: 0;
  18. }
  19.  
  20. #top-menu li {
  21.    float: left;
  22. }
  23.  
  24. #top-menu a {
  25.    display: block;
  26.    padding: 5px 25px 7px 25px;
  27.    width: 4em;
  28.    text-align: center;
  29.    -webkit-transition: .5s all ease-out;
  30.    -moz-transition: .5s all ease-out;
  31.    transition: .5s all ease-out;
  32.    border-top: 3px solid white;
  33.    color: #aaa;
  34.    text-decoration: none;
  35. }
  36.  
  37. #top-menu a:hover {
  38.    color: #000;
  39. }
  40.  
  41. #top-menu li.active a {
  42.    border-top: 3px solid #333;
  43.    color: #333;
  44. }
  45.  
  46. #foo {
  47.    position: absolute;
  48.    top: 400px;
  49. }
  50.  
  51. #bar {
  52.    position: absolute;
  53.    top: 800px;
  54. }
  55.  
  56. #baz {
  57.    position: absolute;
  58.    top: 1200px;
  59. }
  60. </style>
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67. <script type="text/javascript">
  68.  
  69.  
  70.  
  71. jQuery(document).ready(function($) {
  72.  
  73.                         // Cache selectors
  74.         var lastId,
  75.                 topMenu = $("#top-menu"),
  76.                 topMenuHeight = topMenu.outerHeight()+15,
  77.                 // All list items
  78.                 menuItems = topMenu.find("a"),
  79.                 // Anchors corresponding to menu items
  80.                 scrollItems = menuItems.map(function(){
  81.                   var item = $($(this).attr("href"));
  82.                   if (item.length) { return item; }
  83.                 });
  84.        
  85.         // Bind click handler to menu items
  86.         // so we can get a fancy scroll animation
  87.         menuItems.click(function(e){
  88.           var href = $(this).attr("href"),
  89.                   offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  90.           $('html, body').stop().animate({
  91.                   scrollTop: offsetTop
  92.           }, 400);
  93.           e.preventDefault();
  94.         });
  95.        
  96.         // Bind to scroll
  97.         $(window).scroll(function(){
  98.            // Get container scroll position
  99.            var fromTop = $(this).scrollTop()+topMenuHeight;
  100.            
  101.            // Get id of current scroll item
  102.            var cur = scrollItems.map(function(){
  103.                  if ($(this).offset().top < fromTop)
  104.                    return this;
  105.            });
  106.            // Get the id of the current element
  107.            cur = cur[cur.length-1];
  108.            var id = cur && cur.length ? cur[0].id : "";
  109.            
  110.            if (lastId !== id) {
  111.                    lastId = id;
  112.                    // Set/remove active class
  113.                    menuItems
  114.                          .parent().removeClass("active")
  115.                          .end().filter("[href=#"+id+"]").parent().addClass("active");
  116.            }                  
  117.         });
  118.                
  119.  
  120.                });
  121.  
  122.  
  123. </script>
  124.  
  125. <body>
  126.     <ul id="top-menu">
  127.       <li class="active">
  128.         <a href="#">Top</a>
  129.       </li>
  130.       <li><a href="#foo">Foo</a></li>
  131.       <li>
  132.         <a href="#bar">Bar</a>
  133.       </li>
  134.       <li>
  135.         <a href="#baz">Baz</a>
  136.       </li>
  137.     </ul>
  138.    
  139.     <a id="foo">Foo</a>
  140.    
  141.    
  142.     <a id="bar">Bar</a>
  143.    
  144.    
  145.     <a id="baz">Baz</a>
  146. </body>
 
 Top
esterio
Отправлено: 12 Ноября, 2014 - 13:17:04
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. var offsetTop = this.hash === '' ? 0 : $(this.hash).offset().top-topMenuHeight+1;

(Добавление)
https://gist[dot]github[dot]com/jlong/2428561
 
 Top
Айратиус
Отправлено: 12 Ноября, 2014 - 13:50:59
Post Id



Частый гость


Покинул форум
Сообщений всего: 192
Дата рег-ции: Нояб. 2012  
Откуда: Россия


Помог: 0 раз(а)
esterio Честно вообще не понял куда это вставить или вместо чего
 
 Top
esterio
Отправлено: 12 Ноября, 2014 - 14:43:41
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
Айратиус пишет:
menuItems.click(function(e){
var offsetTop = this.hash === '' ? 0 : $(this.hash).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 400);
e.preventDefault();
});
 
 Top
Айратиус
Отправлено: 12 Ноября, 2014 - 15:07:29
Post Id



Частый гость


Покинул форум
Сообщений всего: 192
Дата рег-ции: Нояб. 2012  
Откуда: Россия


Помог: 0 раз(а)
esterio пишет:
Айратиус пишет:
menuItems.click(function(e){
var offsetTop = this.hash === '' ? 0 : $(this.hash).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 400);
e.preventDefault();
});


Нет( не хочет работать к index.php#foo не применяется стиль(


CODE (htmlphp):
скопировать код в буфер обмена
  1. <!doctype html><head>
  2.  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
  3. </head>
  4.  
  5. <style>
  6. body {
  7.    height: 6000px;
  8.    font-family: Helvetica, Arial;
  9. }
  10.  
  11. #top-menu {
  12.    position: fixed;
  13.    z-index: 1;
  14.    background: white;
  15.    left: 0;
  16.    right: 0;
  17.    top: 0;
  18. }
  19.  
  20. #top-menu li {
  21.    float: left;
  22. }
  23.  
  24. #top-menu a {
  25.    display: block;
  26.    padding: 5px 25px 7px 25px;
  27.    width: 4em;
  28.    text-align: center;
  29.    -webkit-transition: .5s all ease-out;
  30.    -moz-transition: .5s all ease-out;
  31.    transition: .5s all ease-out;
  32.    border-top: 3px solid white;
  33.    color: #aaa;
  34.    text-decoration: none;
  35. }
  36.  
  37. #top-menu a:hover {
  38.    color: #000;
  39. }
  40.  
  41. #top-menu li.active a {
  42.    border-top: 3px solid #333;
  43.    color: #333;
  44. }
  45.  
  46. #foo {
  47.    position: absolute;
  48.    top: 400px;
  49. }
  50.  
  51. #bar {
  52.    position: absolute;
  53.    top: 800px;
  54. }
  55.  
  56. #baz {
  57.    position: absolute;
  58.    top: 1200px;
  59. }
  60. </style>
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67. <script type="text/javascript">
  68.  
  69.  
  70.  
  71. jQuery(document).ready(function($) {
  72.  
  73.                         // Cache selectors
  74.         var lastId,
  75.                 topMenu = $("#top-menu"),
  76.                 topMenuHeight = topMenu.outerHeight()+15,
  77.                 // All list items
  78.                 menuItems = topMenu.find("a"),
  79.                 // Anchors corresponding to menu items
  80.                 scrollItems = menuItems.map(function(){
  81.                   var item = $($(this).attr("href"));
  82.                   if (item.length) { return item; }
  83.                 });
  84.        
  85.         // Bind click handler to menu items
  86.         // so we can get a fancy scroll animation
  87. menuItems.click(function(e){
  88. var offsetTop = this.hash === '' ? 0 : $(this.hash).offset().top-topMenuHeight+1;
  89. $('html, body').stop().animate({
  90. scrollTop: offsetTop
  91. }, 400);
  92. e.preventDefault();
  93. });
  94.        
  95.         // Bind to scroll
  96.         $(window).scroll(function(){
  97.            // Get container scroll position
  98.            var fromTop = $(this).scrollTop()+topMenuHeight;
  99.            
  100.            // Get id of current scroll item
  101.            var cur = scrollItems.map(function(){
  102.                  if ($(this).offset().top < fromTop)
  103.                    return this;
  104.            });
  105.            // Get the id of the current element
  106.            cur = cur[cur.length-1];
  107.            var id = cur && cur.length ? cur[0].id : "";
  108.            
  109.            if (lastId !== id) {
  110.                    lastId = id;
  111.                    // Set/remove active class
  112.                    menuItems
  113.                          .parent().removeClass("active")
  114.                          .end().filter("[href=#"+id+"]").parent().addClass("active");
  115.            }                  
  116.         });
  117.                
  118.  
  119.                });
  120.  
  121.  
  122. </script>
  123.  
  124. <body>
  125.     <ul id="top-menu">
  126.       <li class="active">
  127.         <a href="#">Top</a>
  128.       </li>
  129.       <li><a href="index.php#foo">Foo</a></li>
  130.       <li>
  131.         <a href="#bar">Bar</a>
  132.       </li>
  133.       <li>
  134.         <a href="#baz">Baz</a>
  135.       </li>
  136.     </ul>
  137.    
  138.     <a id="foo">Foo</a>
  139.    
  140.    
  141.     <a id="bar">Bar</a>
  142.    
  143.    
  144.     <a id="baz">Baz</a>
  145. </body>
 
 Top
esterio
Отправлено: 12 Ноября, 2014 - 15:22:48
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
 
 Top
Айратиус
Отправлено: 12 Ноября, 2014 - 15:27:43
Post Id



Частый гость


Покинул форум
Сообщений всего: 192
Дата рег-ции: Нояб. 2012  
Откуда: Россия


Помог: 0 раз(а)
esterio пишет:
как нет
http://jsfiddle.net/up4nu/3689/



Ну то же самое, пункт меню Foo при прокрутке не подсвечивается точнее над ним не появляется линия
 
 Top
esterio
Отправлено: 12 Ноября, 2014 - 15:29:45
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
та заметил я уже.
CODE (javascript):
скопировать код в буфер обмена
  1.  scrollItems = menuItems.map(function(){
  2.       var item = $(this.hash);
  3.       if (item.length) { return item; }
  4.     });


но все равно оно не находит его.
я скажу проще данный скрипт в топку. переписать можно акуратней. а так или делайте только хеши в ссиолках или переписивайте
 
 Top
Айратиус
Отправлено: 12 Ноября, 2014 - 15:30:24
Post Id



Частый гость


Покинул форум
Сообщений всего: 192
Дата рег-ции: Нояб. 2012  
Откуда: Россия


Помог: 0 раз(а)
esterio вся загвоздка в том что этот пункт при прокрутке должен подсвечиваться. Должен применяться класс active у которого border-top 3 px , этот класс не применяется соответсвенно и линии над пунктом меню нет

не успел увидеть
(Добавление)
esterio пишет:
та заметил я уже.
CODE (javascript):
скопировать код в буфер обмена
  1.  scrollItems = menuItems.map(function(){
  2.       var item = $(this.hash);
  3.       if (item.length) { return item; }
  4.     });


но все равно оно не находит его.
я скажу проще данный скрипт в топку. переписать можно акуратней. а так или делайте только хеши в ссиолках или переписивайте


Я в JS полный ноль, нашел в сети этот код. Помоги разобраться...

(Отредактировано автором: 12 Ноября, 2014 - 15:30:48)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB