CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3affixbootstrap-affix
mohammmeden
mohammmeden

Reputation: 43

how to absolute button when it reach footer Bootstrap Affix

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>

Upvotes: 0

Views: 71

Answers (1)

mohammmeden
mohammmeden

Reputation: 43

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;  

 }

Upvotes: 0

Related Questions