0

Здравствуйте!

У меня посты на сайте подгружаются с помощью Infinite scroll. Я подключил js файл, в котором плавный переход по якорям и изменение класса у ссылок при скролле.

Так вот при загрузке первого поста эти функции выполняются. Но как только подгрузился второй пост (и все следующие) - в нем уже не работает ни плавная прокрутка, ни изменение класса.

Вот js файл:

    jQuery(document).ready(function($){

    // Прокрутка на все якоря (#) и на a[name]. v1.1
    $('a[href*="#"]').on('click.smoothscroll', function( e ){
        var hash    = this.hash,
            _hash   = hash.replace(/#/,''),
            theHref = $(this).attr('href').replace(/#.*/, '');

        if( theHref && location.href.replace(/#.*/,'') != theHref ) return; // не текущая страница

        var $target = _hash === '' ? $('body') : $( hash + ', a[name="'+ _hash +'"]').first();

        if( ! $target.length ) return;

        e.preventDefault();

        $('html, body').stop().animate({ scrollTop: $target.offset().top - 65 }, 400, 'swing', function(){
            window.location.hash = target;
        });
    });

    // Cache selectors
var lastId,
    topMenu = $("#kcmenu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });



// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
});

});

Подскажите, пожалуйста, как можно его переделать, чтобы подружить с Infinite scroll?

1
  • Лень разбираться, но "не работает после динамики, хотя работало при первичной загрузке" - типичный признак недостатка делегирования. На новых элементах банально нет обработчиков. Повесьте их выше и делегируйте.
    – user207618
    21 апр 2018 в 8:32

1 ответ 1

0
$(document.body).on('click', 'a[href*="#"]', function(e) {
   // ваш код
});

Вместо:

   menuItems
     .parent().removeClass("active")

Должно быть:

   $("#kcmenu").find("a")
     .parent().removeClass("active")

Это нужно потому что при обновлении DOM ваши скрипты должны видеть новые элементы. Без этого изменения скрипты видят только старые, потому на них ничего не действует.

2
  • Благодарю! Сработало для первой половины кода. Плавная прокрутка теперь работает везде. Еще бы для второй половины решение.
    – cereal007
    21 апр 2018 в 15:45
  • Пожалуйста! Галочку слева от ответа тоже не мешает поставить, и проголосовать. Это лучшее спасибо
    – sanmai
    21 апр 2018 в 23:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.