bootstrap 3 affix not working SharePoint 2013

Question

I want to use bootstrap 3 affix functionality in my SharePoint site. I have tried to affix my div element using both data attributes and via javascript. But none of them works. The same code works in my HTML designs.

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

It adds affix-top class. But even if I scroll more than 350px downwards, it doesn't add affix class. So my div elements is not visible always.

Any help/pointers will be helpful.

Most probably the sharepoint css interfere with bootstrap css, try to debug the page and check the element css. — Max, Apr 05 '15 at 11:53
Anything specific I need to look in? Any specific style required for parent/current element? — Sushrut Paranjape, Apr 07 '15 at 17:44

score 0 · Answer 1 · answered Jun 22 '15 at 09:31

You need to factor in that the #s4-workspace is effectually the body for your sharepoint page. There's a good bootstrap for sharepoint library here:

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

which you can include and works specifically for the affix utility.

Include this code and it should start working within your sharepoint page:

$('#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))
                });
            }
        });
    }

bootstrap 3 affix not working SharePoint 2013

1 Answers1