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)) 
       }); 
      } 
     }); 
    }