Home » Jquery » jquery – how to absolute button when it reach footer Bootstrap Affix

jquery – how to absolute button when it reach footer Bootstrap Affix

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have created a button in the right bottom of screen and footer in bottom of the screen and i have make the button it position: fixed I want to change position to absolute on scrolling down reach the footer
my css:

.affix-top {
    position:fixed;
}
.affix {
    position:absolute;

} 

my script:

$("#myBtn").affix({
        offset: {
            top: $("#footer").outerHeight(true),
            bottom: null
        }
    });

my footer:

<footer class="footer" id="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <h4 class="title">KYK Restaurant ★</h4>
                <p>THE BEST Delivery Restaurants - ★★★★★</p>
            </div>
    </div>
</div>
How to&Answer:

1)Add data-spy=”affix” to the div you would like to fix in the right side. Also Add a class to the div, in the example i added the class as my-affix-div.
Then add the below Javascript code.
in js:

$('.my-affix-div').affix(
   {offset:{top: 75, bottom: 240}}
);

in css:

.affix-bottom{
    position: absolute;
    right: 0;  
}
.affix-top{
    position: absolute;
    right: 0;  
}
.affix {
        top: 200px;
        right: 0;  

 }