Sometimes while designing the website, we include some attractive features which makes website eye-catching. One of the features is Bootstrap scrollspy which target the navigation bar contents automatically on scrolling the area.
Create scrollspy: The data-spy=”scroll” and data-target=”.navbar” attribute is used to create scrollspy element. The scrollspy is used to update the navigation links when scrolling the page.
Example:
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Scrollspy</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< style >
body {
position: relative;
}
</ style >
</ head >
< body data-spy = "scroll" data-target = ".navbar"
data-offset = "50" >
< nav class = "navbar navbar-expand-sm bg-success navbar-dark fixed-top" >
< ul class = "navbar-nav" >
< li class = "nav-item" >
< a class = "nav-link" href = "#content1" >
Home
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#content2" >
Algo
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#content3" >
DS
</ a >
</ li >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" href = "#"
id = "navbardrop" data-toggle = "dropdown" >
Languages
</ a >
< div class = "dropdown-menu" >
< a class = "dropdown-item"
href = "#content4" >
C
</ a >
< a class = "dropdown-item"
href = "#content5" >
C++
</ a >
</ div >
</ li >
</ ul >
</ nav >
< div id = "content1" class = "container-fluid bg-primary"
style = "height:250px; padding-top:80px;" >
< h1 >GeeksforGeeks</ h1 >
< p >A computer science portal for geeks</ p >
</ div >
< div id = "content2" class = "container-fluid bg-light"
style = "height:250px; padding-top:80px;" >
< h1 >Algorithm Analysis</ h1 >
< p >A stepwise procedure to solve a problem</ p >
</ div >
< div id = "content3" class = "container-fluid bg-warning"
style = "height:250px; padding-top:80px;" >
< h1 >Data Structure</ h1 >
< p >
Data structure is a particular way to
organizing the datain computer memory
so that it can be used efficiently.
</ p >
</ div >
< div id = "content4" class = "container-fluid bg-info"
style = "height:250px; padding-top:80px;" >
< h1 >C Languages</ h1 >
< p >
C is a computer science programming language
</ p >
</ div >
< div id = "content5" class = "container-fluid bg-dark"
style = "height:250px; padding-top:80px;" >
< h1 >C++ Languages</ h1 >
< p >
C++ is the extension of C language.
</ p >
</ div >
</ body >
</ html >
|
Output:
Scrollspy Vertical Menu: It creates vertical navigation menu and the content are display according to the menu.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Scrollspy</ title >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< style >
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 500px;
}
</ style >
</ head >
< body data-spy = "scroll" data-target = "#GFG_scrollspy"
data-offset = "1" >
< div class = "container-fluid" >
< div class = "row" >
< nav class = "col-sm-4 col-4" id = "GFG_scrollspy" >
< ul class = "nav nav-pills flex-column" >
< li class = "nav-item" >
< a class = "nav-link active"
href = "#content1" >
Home
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link"
href = "#content2" >
Algo
</ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link"
href = "#content3" >
DS
</ a >
</ li >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle"
href = "#" id = "navbardrop"
data-toggle = "dropdown" >
Languages
</ a >
< div class = "dropdown-menu" >
< a class = "dropdown-item"
href = "#content4" >
C
</ a >
< a class = "dropdown-item"
href = "#content5" >
C++
</ a >
</ div >
</ li >
</ ul >
</ nav >
< div class = "col-sm-8 col-8" >
< div id = "content1" class = "container-fluid bg-primary"
style = "height:250px; padding-top:80px;" >
< h1 >GeeksforGeeks</ h1 >
< p >A computer science portal for geeks</ p >
</ div >
< div id = "content2" class = "container-fluid bg-light"
style = "height:250px; padding-top:80px;" >
< h1 >Algorithm Analysis</ h1 >
< p >A stepwise procedure to solve a problem</ p >
</ div >
< div id = "content3" class = "container-fluid bg-warning"
style = "height:250px; padding-top:80px;" >
< h1 >Data Structure</ h1 >
< p >
Data structure is a particular way to
organizing the data in computer memory
so that it can be used efficiently.
</ p >
</ div >
< div id = "content4" class = "container-fluid bg-info"
style = "height:250px; padding-top:80px;" >
< h1 >C Languages</ h1 >
< p >
C is a computer science programming language
</ p >
</ div >
< div id = "content5" class = "container-fluid bg-dark"
style = "height:250px; padding-top:80px;" >
< h1 >C++ Languages</ h1 >
< p >
C++ is the extension of C language.
</ p >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari