Bootstrap Scrollspy

Please follow the following HTML code to add scrollspy effect in your website.

HTML Code
<body data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
            </button>
            <a class="navbar-brand" href="#">Website Name</a>
        </div>
        <div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#testimonial">Testimonial</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#service1">Services 1</a></li>
                            <li><a href="#service2">Services 2</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav> 
    <div id="home" class="container-fluid">
        <h1>Home</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </p>
    </div>
    <div id="about" class="container-fluid">
        <h1>About</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </p>
    </div>
    <div id="testimonial" class="container-fluid">
        <h1>Testimonial</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </p>
    </div>
    <div id="service1" class="container-fluid">
        <h1>Services 1</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </p>
    </div>
    <div id="service2" class="container-fluid">
        <h1>Services 2</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem </p>
    </div> 
</body>

CSS Code
This is only example CSS but you can style your own choice.
#home {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#about {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#testimonial {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#service1 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#service2 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}

Share this

Related Posts