Bootstrap 3 Vertical Affix Menu Example As In The Docs - Resizing Issue

I am trying to use Bootstrap 3 vertical scrollspy, however I cannot find any examples included in the source. I went ahead and stripped out the documentation pages from here http:/

Solution 1:

I messed with the JavaScript for a while and here's what I came up with:

! function ($) {
    $(function () {
        var $window = $(window)
        var $body = $(document.body)
        var $sideBar = $('.bs-sidebar')
        var navHeight = $('.navbar').outerHeight(true) + 10

        $body.scrollspy({
            target: '.bs-sidebar',
            offset: navHeight
        })

        $('.bs-docs-container [href=#]').click(function (e) {
            e.preventDefault()
        })

        $window.on('resize', function () {
            $body.scrollspy('refresh')
            // We were resized. Check the position of the nav box
            $sideBar.affix('checkPosition')
        })

        $window.on('load', function () {
            $body.scrollspy('refresh')
            $('.bs-top').affix();
            $sideBar.affix({
                offset: {
                    top: function () {
                        var offsetTop = $sideBar.offset().topvar sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
                        var navOuterHeight = $('.bs-docs-nav').height()

                        // We can cache the height of the header (hence the this.top=)// This function will never be called again.return (this.top = offsetTop - navOuterHeight - sideBarMargin);
                    },
                    bottom: function () {
                        // We can't cache the height of the footer, since it could change// when the window is resized. This function will be called every// time the window is scrolled or resizedreturn $('.bs-footer').outerHeight(true)
                    }
                }
            })
            setTimeout(function () {
                // Check the position of the nav box ASAP
                $sideBar.affix('checkPosition')
            }, 10);
            setTimeout(function () {
                // Check it again after a while (required for IE)
                $sideBar.affix('checkPosition')
            }, 100);
        });

        // tooltip demo
        $('.tooltip-demo').tooltip({
            selector: "[data-toggle=tooltip]",
            container: "body"
        })

        $('.tooltip-test').tooltip()
        $('.popover-test').popover()

        $('.bs-docs-navbar').tooltip({
            selector: "a[data-toggle=tooltip]",
            container: ".bs-docs-navbar .nav"
        })
    })
}(window.jQuery)

I think this behaves like what you want.

The key was getting all of the recalculations to happen at the right time. Nothing seemed to be checking the position of the nav box when the page was reloaded. The height of the footer also needed to be recalculated every time because the footer changes height when the page is resized.

I also had to play with the timing of things. Notice that there are two setTimeouts with different delays but the same code. This is to attempt to get the position check done soon but also wait long enough for IE.

See the comments in the code for more details.

JSFiddle: http://jsfiddle.net/jdwire/2XXRF/25/

Full Screen Result: http://fiddle.jshell.net/jdwire/2XXRF/25/show/light/

Solution 2:

You are using javascript from Twitter's Docs. The first comments of these scripts are:

// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT // IT'S ALL JUST JUNK FOR OUR DOCS! // ++++++++++++++++++++++++++++++++++++++++++

These script handle problem / fixes for this pages only. Try to fix your problems with the original Bootstrap plugins or extend them for you specific situation.

Also read this questions which handle similar problems:

• Bootstrap affix navbar for single page with scrollspy and page anchors
• Bootstrap 3 - Scrollspy with sidebar
• Bootstrap 3RC1 + Side Panel + Affix

Solution 3:

I think you could simplify this a lot by using and understanding the relevant portions of the CSS and JavaScript from the docs.

The most complex part is the #sidebar CSS. Using .affix will remove the sidebar from the typical flow of the page, so you need to set a specific width for the #sidebar. The CSS handles the 3 cases for the sidebar position (affix, affix-top and affix-bottom). 2 different media queries are used so that the sidebar affix is only applied on larger screens >992px, and slightly wider on >1200px..

CSS

.affix-top,.affix{
    position: static;
}

@media screen and (min-width: 992px) {

  #sidebar.nav > .active > ul {
    display: block;
  }
  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  #sidebar.affix,
  #sidebar.affix-bottom {
    width: 228px;
  }
  #sidebar.affix {
    position: fixed;
    top: 220px;
  }
  #sidebar.affix-bottom {
    position: absolute;
  }
}
@media screen and (min-width: 1200px) {
  #sidebar.affix-bottom,
  #sidebar.affix {
    width: 235px;
  }
}

The other important part is the javascript that calculates the height of the header (#masthead)above the sidebar, and footerbelow the sidebar. These heights are used to determine where affix will become sticky at the top, and return to absolute position at the bottom when the footer is visible in the viewport.

JavaScript

$('#sidebar').affix({
      offset: {
        top: function () {
          var navOuterHeight = $('#masthead').height();
          returnthis.top = navOuterHeight;
        },
        bottom: function () {
          return (this.bottom = $('footer').outerHeight(true))
        }
      }
});

Here is a working example / template: http://bootply.com/84981