bootstrap 3 affix not working SharePoint 2013

Question

Я хочу использовать функциональность bootstrap 3 affix на моем сайте SharePoint. Я попытался привязать мой элемент div, используя как атрибуты данных, так и через javascript. Но никто из них не работает. Тот же код работает в моих проектах HTML.

$('#divElem').affix({ 
    offset: { 
     top: 350 
    } 
}); 

Он добавляет аффикс-топ-класс. Но даже если я прокручиваю более 350 пикселей вниз, он не добавляет класс аффикса. Поэтому мои элементы div всегда не видны.

Любая помощь/указатели будут полезны.

Answer 1

Вам нужно учитывать, что # s4-workspace является фактически телом для вашей страницы sharepoint. Там хорошие самозагрузки для Sharepoint библиотеки здесь:

https://github.com/ricardo-cantu/sharepoint-bootstrap

, которые вы можете включать и работаете специально для утилиты аффикса.

Включите этот код и он должен начать работать в пределах вашей страницы Sharepoint:

$('#divElem').affix({ 
     offset: { 
      top: 350 
     } 
    }); 

    /* activate scrollspy menu */ 
    var $body = $('#s4-workspace'); 
    var navHeight = $('#ms-designer-ribbon').outerHeight(true) + 10; 

    $body.scrollspy({ 
     target: '#leftCol', 
     offset: navHeight 
    }); 

    /* smooth scrolling sections */ 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      if (target.length) { 
       $('#s4-workspace').animate({ 
        scrollTop: target.offset().top - 50 
       }, 1000); 
       return false; 
      } 
     } 
    }); 

    var $affixNav = $('[data-spy=affix]'), 
     $msDesignerRibbon = $('#ms-designer-ribbon'); 

    if ($affixNav.length) { 
     $affixNav.affix({ 
      offset: { 
       top: function() { 
        return (this.top === $('[role=heading]').outerHeight(true) + $('[role=menubar]').outerHeight(true)); 
       }, 
       bottom: function() { 
        return (this.bottom === $('footer').outerHeight() - parseInt($('footer').css('margin-top'), 10)); 
       } 
      } 
     }); 

     $affixNav.on('affix.bs.affix', function(e) { 
      $affixNav.addClass('col-md-2') 
       .css({ 
        'top': 17 + ($msDesignerRibbon.height() + parseInt($msDesignerRibbon.css('margin-top'), 10)), 
        'position': '' 
       }); 
     }); 
     $affixNav.on('affix-top.bs.affix', function(e) { 
      $affixNav.removeClass('col-md-2') 
       .css({ 
        'top': 0, 
        'position': '' 
       }); 
     }); 
     $affixNav.on('affix-bottom.bs.affix', function(e) { 
      $affixNav.removeClass('col-md-2'); 
     }); 

     $(document).on('FixRibbonAndWorkspaceDimensions', function(e) { 
      if ($affixNav.hasClass('col-md-2')) { 
       $affixNav.css({ 
        'top': 17 + ($msDesignerRibbon.height() + parseInt($msDesignerRibbon.css('margin-top'), 10)) 
       }); 
      } 
     }); 
    }