CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
Shah Muhammad Saklaen
Shah Muhammad Saklaen

Reputation: 1

what is the solution of Scrolling a Div with Bootstrap 3

I was trying to stick a div and to scroll it vertically. But the problem is when I start Scroll the div becomes small the inserted pictures depicts it all.

Please refer to the image 'before_scroll' and 'after_scroll' to understand the problem. bellow is my HTMl and JS codes:

HTML:
<div id="my-affix" data-spy="affix" data-offset-top="60" data-offset-bottom="200" class="affix fixed-top">
    <div class="container-fluid header">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <img class="img-responsive logo" src="image/logo.png" alt="" />
            </div>  
        </div>
    </div>  
</div>

JS:

$('#my-affix').affix-top({
    offset: {
      top: 1000
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

Image: https://dl.dropboxusercontent.com/u/80495844/after_scroll.jpg https://dl.dropboxusercontent.com/u/80495844/before_scroll.jpg

Upvotes: 0

Views: 62

Answers (1)

Christina
Christina

Reputation: 34642

When you toggle a class/style on scroll and becomes position:fixed or position:absolute, the fixed/absolute element needs a size or position.

   #my-affix {left:0;right:0;} /* example only */

Learn more: http://learnlayout.com/position.html

Upvotes: 1

Related Questions