bootstrap 3词缀不工作SharePoint 2013

Question

我想在我的SharePoint网站中使用引导程序3附加功能。我试图用数据属性和javascript来粘贴div元素。但是他们都没有工作。相同的代码在我的HTML设计中起作用。

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

它增加了词缀顶级类。但即使我向下滚动超过350px，也不会添加词缀类。所以我的div元素总是不可见。

任何帮助/指针都会有所帮助。

Answer 1

您需要考虑＃s4工作区是您的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)) 
       }); 
      } 
     }); 
    }