In this we will discuss what to do if the bootstrap scrollspy plugin is not working
Bootstrap tutorial for beginners
This is continuation to previous tutorial. Please go through 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
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
2. Manually add scrollspy using the JavaScript
Bootstrap tutorial for beginners
This is continuation to previous tutorial. Please go through 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>
