Bootstrap Affix Plugin

The affix plugin in bootstrap is used to lock any element on the page. The affix plugin is used with navigation bars and icons etc. This is done to make the navigation menu to lock to a specific location on the page.

The affix plugin can be added into bootstrap individually by including the affix.js files. Affix plugin can also be added all at once when we use bootstrap.js files.


Usage:

The affix plugin can be used by adding JavaScript or through data attributes:


By using data attributes:

Affix plugin can be added by using the data attribute data-spy = “affix” with the element that the user wants to spy on. Along with this attribute, we also use data-offset-top = “number” or data-offset-bottom = “number”. This is useful to set the position of the scroll bars.


Example:

Consider the following example in which affix plugin is used through data attributes:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min.  js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div class = “container”>

<div class = “jumbotron”>

<h2>Example of Affix Plugin in Bootstrap</h2>

</div>

< div id = “Nav1”  data-spy = “affix” data-offset-top = “70” data-offset-bottom = “200”>

<div class = “col-md-3”>

<ul class = “nav nav-tabs nav-stacked affix” data-spy = “affix” data-offset-top = “190”>

<li class = “active”><a href = “#programming1”>Java Programming</a>

</li>

<li><a href = “#programming2”>C++ Programming</a></li>

<li><a href = “#programming3”>Python Programming</a></li>

</ul>

</div>

<div class = “col-md-9”>

<h2 id = “programming1”>Java Programming</h2>

<p>Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. Java is a programming language which is widely used to distribute the executable programs through World Wide Web. It is a general purpose language and is considered as a platform or software which can run a program. Java programming language was modeled after C++.

</p>

<p>Java is the simplest language with a structured syntax and was build to be easy to understand. C++ is considered as the base of Java programming language as Java was modeled after C++. Java is a general purpose language which can be used for many purposes such as writing software. Java is machine independent which means that programs written in Java on one computer can be executed on another without recompiling the code.

</p>

<hr>

<h2 id = “programming2”>C++ Programming</h2>

<p>One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. The language was previously used for system programs also like for the operating systems, compilers, etc. </p>

<p>The C++ programming language is considered to be a highly structured programming language which allows the user to be close to hardware and peripheral devices same like the assembly language. C++ programming language is also referred as a mid level language which has the features of both high level and low level language. C++ has the advantages of both.</p>

<hr>

<h2 id = “programming3”>Python Programming</h2>

<p>Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand. There are also other versions of python programming language. Python 2 was released in October 2000 and Python 3 was released in December 2008 and is considered more compatible. Python has a simple structure and dynamic typing and hence it is used for application development.

</p>

<p>Python is a structured programming language which also has the features of object oriented programming. The language has the simplest syntax and is easy to understand and learn. Python has an open source nature and hence the programs in python can be executed on different machines. Python is interpreted programming language that is the program is interpreted line by line. </p>

<p>We can divide the programs written in python into sets by creating objects and this is what object oriented programming is. Python is an extensible programming language meaning that we can add C or C++ codes in a python program to build some application program. We can say that python programming language can be embedded with other programming languages like C or C++. And it also has a large standard library to perform functions. </p>

< p > Python programming language is widely used for web development and for scientific and numeric computing. Python also supports graphical user interface and can be ported to other systems. Python is also best option to create prototypes for example we can create a game by adding a header file Pygame. </p>

</div>

</div>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

following result


By using JavaScript:

Use the following lines of JavaScript to use affix plugin:

CODE:

$ (‘.nav’).affix ({offset: {top: 100} });


Example:

Consider the following example in which affix plugins are added using JavaScript:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min.  js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div class = “container” >

< div class = “jumbotron” >

< h2 > Example of Affix in Bootstrap </ h2 >

</ div >

< div >

< div class = “col- md- 3” >

< ul class = “nav nav- tabs nav- stacked affix” id = “Nav1” >

< li class = “active” >< a href = “#programming1” > Java programming </ a >

</ li >

< li >< a href = “#programming2” > C++ programming </ a ></ li >

< li >< a href = “#programming3” > Python programming </ a ></ li >

</ ul >

</ div >

< div class = “col- md -9” >

< h2 id = “programming1” > Java programming </ h2 >

< p > Java is an object oriented high level programming language which was designed to be simple, small and portable across various different operating systems in 1991 by Sun Microsystems. </ p >

< p > Java is the simplest language with a structured syntax and was build to be easy to understand. C++ is considered as the base of Java programming language as Java was modeled after C++. Java is a general purpose language which can be used for many purposes such as writing software. Java is machine independent which means that programs written in Java on one computer can be executed on another without recompiling the code. </ p >

< hr >

< h2 id = “programming2” > C++ programming </ h2 >

< p > One of the most popular programming languages includes C++ which was developed by Bajarne Stroustrup in 1979 at the bell laboratories. C++ programming language is used by many programmers to for different types of applications which may include database management systems etc. The language was previously used for system programs also like for the operating systems, compilers, etc. </ p >

< p > The C++ programming language is considered to be a highly structured programming language which allows the user to be close to hardware and peripheral devices same like the assembly language. C++ programming language is also referred as a mid level language which has the features of both high level and low level language. C++ has the advantages of both. < /p >

< hr >

< h2 id = “programming3” > Python programming </ h2 >

< p >Python is a dynamic programming language which was developed by Guido van Rossum in the late 1980s at CWI. Python is a high level programming language which and is easy to understand. There are also other versions of python programming language. Python 2 was released in October 2000 and Python 3 was released in December 2008 and is considered more compatible. Python has a simple structure and dynamic typing and hence it is used for application development. </ p >

< p > Python is a structured programming language which also has the features of object oriented programming. The language has the simplest syntax and is easy to understand and learn. Python has an open source nature and hence the programs in python can be executed on different machines. Python is interpreted programming language that is the program is interpreted line by line. </ p >

< p > We can divide the programs written in python into sets by creating objects and this is what object oriented programming is. Python is an extensible programming language meaning that we can add C or C++ codes in a python program to build some application program. We can say that python programming language can be embedded with other programming languages like C or C++. And it also has a large standard library to perform functions.  Python programming language is widely used for web development and for scientific and numeric computing. Python also supports graphical user interface and can be ported to other systems. Python is also best option to create prototypes for example we can create a game by adding a header file Pygame. < /p >

</ div >

</ div >

</ div >

< script type = “text/javascript” >

$ (function () {

$ (‘#Nav1’). affix({

offset: {

top: 60

}

});

});

</ script >

</ body >

< /html >

The above code will generate the following result:

OUTPUT:

OUTPUT


Positioning via CSS:

CSS can be used to position the content on the page. We have three classes for affix plugin that are .affix, .affix-top, .affix-bottom. We can set CSS for all these classes:

When we are using the .affix-top class, there is no need of CSS positioning this is because this class is used to indicate that element is on top.

For the .affix class, we need CSS positioning as position: fixed.

For the .affix-bottom class, we need CSS positioning as position: absolute.


Options:

Consider the following table in which the option for affix plugin is described:

Option Type Default Value Data attribute Description
offset number Default: 10 data- offset

This option is used to specify the number of pixels to offset from top when calculation of the position of scroll bar is being done.