TechFunda Online: 2949
GTF

Bootstrap > Affix

Affix Events in Bootstrap

How to display alert in affix events in Bootstrap

Previous Post
Next Post

affix.bs.affix

It occurs before fixed positioning is added to the element, it displays the alert when the screen is scrolled down and when it reaches given height it displays alert message

<style>
        .affix {
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background-color:green;color:white;height:200px;">
        <h2>SN ITFunda</h2>
        <p> SN ITFunda service is a software company which has websites to provide .NET training for people </p>
    </div>
    <br />
    <div class="container">
        <div class="row">
            <nav class="col-sm-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">DotNetFunda</a></li>
                    <li><a href="#">TechFunda</a></li>
                    <li><a href="#">ItFunda</a></li>
                    <li><a href="#">kidsFunda</a></li>
                    <li><a href="#">FarmingFunda</a></li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.nav').affix({ offset: { top: 205 } });
            $(".nav").on('affix.bs.affix', function () {
                alert('Welcome to TechFunda')
            });
        });
    </script>
</body>
  • In the above code snippet we have defined the affix events using affix.bs.affix 
  • In the first step we have given the <style> in <head> section of the html 
  • In the next line we have body section of the html we have div section with class value container-fluid with <style> as background-color:green and color as white height as 200px and we have defined description in the <h1> and <p> element
  • In the next line we have div section with class value container  and we have another div with class value row in the div section and we have nav element in the div section with class value as col-sm-3 and in the nav element we have <ul> with class value nav nav-pills nav-stacked  list to define the list values in the nav element
  • In the next line of div section we have another div with class value col-sm-9
  • In the next step of the html we have the script function to define the affix, in the first step of the script function we have  $('.nav').affix({ offset: { top: 205 } });which defines the nav element with affix  as offset value as top :205 and in the next step of the script function we have $(".nav").on('affix.bs.affix', function () { alert('Welcome to TechFunda') }); which defines the nav element with (on.affix.bs.affix) defines the affix with function as alert with value as Welcome to TechFunda

output

affixed.bs.affix

It occurs after fixed positioning is added to the element, it displays the alert after the fixed positioning is added when the screen is scrolled down it displays the alert message

 <style>
        .affix {
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background-color:green;color:white;height:200px;">
        <h2>SN ITFunda</h2>
        <p> SN ITFunda service is a software company which has websites to provide .NET training for people </p>
    </div>
    <br />
    <div class="container">
        <div class="row">
            <nav class="col-sm-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">DotNetFunda</a></li>
                    <li><a href="#">TechFunda</a></li>
                    <li><a href="#">ItFunda</a></li>
                    <li><a href="#">kidsFunda</a></li>
                    <li><a href="#">FarmingFunda</a></li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.nav').affix({ offset: { top: 205 } });
            $(".nav").on('affixed.bs.affix', function () {
                alert('Welcome to TechFunda')
            }); 
        });
    </script>
</body>
  • In the above code snippet we have defined the affix events using affixed.bs.affix 
  • In the first step we have given the <style> in <head> section of the html 
  • In the next line we have body section of the html we have div section with class value container-fluid with <style> as background-color:green and color as white height as 200px and we have defined description in the <h1> and <p> element
  • In the next line we have div section with class value container  and we have another div with class value row in the div section and we have nav element in the div section with class value as col-sm-3 and in the nav element we have <ul> with class value nav nav-pills nav-stacked  list to define the list values in the nav element
  • In the next line of div section we have another div with class value col-sm-9
  • In the next step of the html we have the script function to define the affix, in the first step of the script function we have  $('.nav').affix({ offset: { top: 205 } });which defines the nav element with affix  as offset value as top :205 and in the next step of the script function we have $(".nav").on('affixed.bs.affix', function () { alert('Welcome to TechFunda') }); which defines the nav element with (on.affixed.bs.affix) defines the affix with function as alert with value as Welcome to TechFunda

output

affix-top.bs.affix

It occurs before the top element returns to its original (non-fixed) position, it displays the alert message when the screen is scrolled down and moves upwards, it reaches given height then it displays the alert message 

 <style>
        .affix {
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background-color:green;color:white;height:200px;">
        <h2>SN ITFunda</h2>
        <p> SN ITFunda service is a software company which has websites to provide .NET training for people </p>
    </div>
    <br />
    <div class="container">
        <div class="row">
            <nav class="col-sm-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">DotNetFunda</a></li>
                    <li><a href="#">TechFunda</a></li>
                    <li><a href="#">ItFunda</a></li>
                    <li><a href="#">kidsFunda</a></li>
                    <li><a href="#">FarmingFunda</a></li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.nav').affix({ offset: { top: 300 } });
            $(".nav").on('affix-top.bs.affix', function () {
                alert('Welcome to TechFunda')
            }); 
        });
    </script>
</body>

affix-top.bs.affix

  • In the above code snippet we have defined the affix events using affix-top.bs.affix 
  • In the first step we have given the <style> in <head> section of the html 
  • In the next line we have body section of the html we have div section with class value container-fluid with <style> as background-color:green and color as white height as 200px and we have defined description in the <h1> and <p> element
  • In the next line we have div section with class value container  and we have another div with class value row in the div section and we have nav element in the div section with class value as col-sm-3 and in the nav element we have <ul> with class value nav nav-pills nav-stacked  list to define the list values in the nav element
  • In the next line of div section we have another div with class value col-sm-9
  • In the next step of the html we have the script function to define the affix, in the first step of the script function we have  $('.nav').affix({ offset: { top: 205 } });which defines the nav element with affix  as offset value as top :205 and in the next step of the script function we have $(".nav").on('affix-top.bs.affix', function () { alert('Welcome to TechFunda') }); which defines the nav element with (on.affixed-top.bs.affix) defines the affix with function as alert with value as Welcome to TechFunda

output

affixed-top.bs.affix

It occurs after the top element reaches to its original position and displays the alert message when the screen is scrolled down and moves upwards

 <style>
        .affix {
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="background-color:green;color:white;height:200px;">
        <h2>SN ITFunda</h2>
        <p> SN ITFunda service is a software company which has websites to provide .NET training for people </p>
    </div>
    <br />
    <div class="container">
        <div class="row">
            <nav class="col-sm-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">DotNetFunda</a></li>
                    <li><a href="#">TechFunda</a></li>
                    <li><a href="#">ItFunda</a></li>
                    <li><a href="#">kidsFunda</a></li>
                    <li><a href="#">FarmingFunda</a></li>
                </ul>
            </nav>
            <div class="col-sm-9">
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
                <h2>Training</h2>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.nav').affix({ offset: { top: 300 } });
            $(".nav").on('affixed-top.bs.affix', function () {
                alert('Welcome to TechFunda')
            }); 
        });
    </script>
</body>

affixed-top.bs.affix

  • In the above code snippet we have defined the affix events using affixed-top.bs.affix 
  • In the first step we have given the <style> in <head> section of the html 
  • In the next line we have body section of the html we have div section with class value container-fluid with <style> as background-color:green and color as white height as 200px and we have defined description in the <h1> and <p> element
  • In the next line we have div section with class value container  and we have another div with class value row in the div section and we have nav element in the div section with class value as col-sm-3 and in the nav element we have <ul> with class value nav nav-pills nav-stacked  list to define the list values in the nav element
  • In the next line of div section we have another div with class value col-sm-9
  • In the next step of the html we have the script function to define the affix, in the first step of the script function we have  $('.nav').affix({ offset: { top: 205 } });which defines the nav element with affix  as offset value as top :205 and in the next step of the script function we have $(".nav").on('affixed-top.bs.affix', function () { alert('Welcome to TechFunda') }); which defines the nav element with (on.affixed-top.bs.affix) defines the affix with function as alert with value as Welcome to TechFunda

output

affix-bottom.bs.affix

It displays the alert message when the screen is scrolled to the bottom of the given height

<body>
    <div class="container-fluid" style="background-color:green;color:white;height:500px;">
        <h1>Bootstrap affix-bottom.bs.affix</h1>
        </div>
    <br />
    <div class="container-fluid">
        <div class="row">
            <nav class="col-sm-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#dnf">DotNetFunda</a></li>
                    <li><a href="#tec">TechFunda</a></li>
                    <li><a href="#itf">ITFunda</a></li>
                </ul>
            </nav>
            <div class="col-sm-9">             
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>       
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.nav').affix({ offset: { bottom: 200 } });
            $('.nav').on('affix-bottom.bs.affix', function () {
                alert('Welcome to TechFunda');
            });
        });
    </script>
</body>

affix-bottom.bs.affix

  • In the above code snippet we have defined the affix events using affixed-bottom.bs.affix 
  • In the next line we have body section of the html we have div section with class value container-fluid with <style> as background-color:green and color as white height as 500px and we have defined description in the <h1> and <p> element
  • In the next line we have div section with class value container  and we have another div with class value row in the div section and we have nav element in the div section with class value as col-sm-3 and in the nav element we have <ul> with class value nav nav-pills nav-stacked  list to define the list values in the nav element
  • In the next line of div section we have another div with class value col-sm-9
  • In the next step of the html we have the script function to define the affix, in the first step of the script function we have  $('.nav').affix({ offset: { bottom: 200 } });which defines the nav element with affix  as offset value as bottom :200 and in the next step of the script function we have $(".nav").on('affixed-bottom.bs.affix', function () { alert('Welcome to TechFunda') }); which defines the nav element with (on.affixed-bottom.bs.affix) defines the affix with function as alert with value as Welcome to TechFunda

output

affixed-bottom.bs.affix

It occurs after the bottom element returns to its original (non-fixed) position

<body>
    <div class="container-fluid" style="background-color:green;color:white;height:500px;">
        <h1>Bootstrap affix-bottom.bs.affix</h1>
        </div>
    <br />
    <div class="container-fluid">
        <div class="row">
            <nav class="col-sm-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#dnf">DotNetFunda</a></li>
                    <li><a href="#tec">TechFunda</a></li>
                    <li><a href="#itf">ITFunda</a></li>
                </ul>
            </nav>
            <div class="col-sm-9">             
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>
                <h1>SN ITFunda</h1>       
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.nav').affix({ offset: { bottom: 200 } });
            $('.nav').on('affixed-bottom.bs.affix', function () {
                alert('Welcome to TechFunda');
            });
        });
    </script>
</body>

affixed-bottom.bs.affix

  • In the above code snippet we have defined the affix events using affixed-bottom.bs.affix 
  • In the next line we have body section of the html we have div section with class value container-fluid with <style> as background-color:green and color as white height as 500px and we have defined description in the <h1> and <p> element
  • In the next line we have div section with class value container  and we have another div with class value row in the div section and we have nav element in the div section with class value as col-sm-3 and in the nav element we have <ul> with class value nav nav-pills nav-stacked  list to define the list values in the nav element
  • In the next line of div section we have another div with class value col-sm-9
  • In the next step of the html we have the script function to define the affix, in the first step of the script function we have  $('.nav').affix({ offset: { bottom: 200 } });which defines the nav element with affix  as offset value as bottom :200 and in the next step of the script function we have $(".nav").on('affixed-bottom.bs.affix', function () { alert('Welcome to TechFunda') }); which defines the nav element with (on.affixed-bottom.bs.affix) defines the affix with function as alert with value as Welcome to TechFunda

output

 Views: 4521 | Post Order: 63
Previous Post
Next Post
Ask Bootstrap question
Report Error

Related Posts


Write for us


Utility Tools




Hosting Recommendations