Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap scrollspy not working

Suggested Video Tutorials
Part 45 - Bootstrap popover
Part 46 - Bootstrap alert
Part 47 - Bootstrap scrollspy



In this video we will discuss what to do if the bootstrap scrollspy plugin is not working



This is continuation to Part 47. Please watch Part 47 from Bootstrap tutorial before proceeding.

DOCTYPE declaration is required for the scrollspy plugin to work. Make sure you have the following doctype declaration at the top of your html page. This declaration designates the file as HTML5 and the scrollspy plugin should start to work if you have configured everything else correctly.
<!DOCTYPE html>

If it's still not working, make sure the element with data-spy="scroll" has the position style set to relative
<style type="text/css">
    body {
        position: relative;
    }
</style>

If it's still not working, use scrollspy() method to manually add the scrollspy plugin using Javascript instead of using data attributes.

1. Remove the 3 data attributes (data-spy, data-target & data-offset) from the body element

<body data-spy="scroll" data-target="#mainNavbar" data-offset="10">

2. Manually add scrollspy using the JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $('body').scrollspy({
            target: '#mainNavbar',
            offset: 10
        });
    });
</script>

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.