Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap. How to add multiple add affix attribute?

I'm using Bootstrap Affix like this :

<div data-spy="affix" data-offset-top="220">

And i add this css for fix the position when affix is triggered :

.affix {
        position: fixed; 
        top: 20px; 
        z-index:1;
        margin-left: auto ; 
        margin-right: auto ;
    }

Is it possible to use the Affix on several Dom element and affect a different css, something like this :

<div data-spy="affix2" data-offset-top="220">
.affix2 {
            position: fixed; 
            top: 50px; 
            z-index:1;
        }
like image 823
mcbjam Avatar asked May 10 '26 18:05

mcbjam


1 Answers

You could make specifiers for the 2 divs..

HTML

<div id="affix1" data-spy="affix" data-offset-top="220">..</div>
<div id="affix2" data-spy="affix" data-offset-top="220">..</div>

CSS

#affix1.affix {
    position: fixed; 
    top: 50px; 
    z-index:1;
}

#affix2.affix {
    position: fixed; 
    top: 200px; 
    z-index:1;
}

Here's a demo: http://bootply.com/63178

like image 135
Zim Avatar answered May 15 '26 16:05

Zim



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!