Bootstrap affix bottom overlay content

Question

I have following css:

#stopBtn{
            width : 100%;
            bottom: 0px;
        }

        .affix-bottom{
            position: absolute;
        }

this is javascript:

$("#stopBtn").affix({
                offset: { 
                    bottom: 0 
                }
            });

The affix effect run smooth, but at the bottom it doesn't place below the content but overlap content.

The markup of it looks like:

<div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <!-- <div class="text-center"> -->
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            </div>  
                        <!-- </div> -->
                    </div>
                </div>
                <div class"tex-center" id="stopBtn">
                    <button class="btn btn-danger btn-mega stopButton">PAUSE</button> 
                </div>

Answer 1

I solved it, but putting some extra space after the accordion. put in about 4
does the trick