javascript - Bootstrap 3.1.0: affix too long - Stack Overflow

admin管理员组

文章数量:1306861

I am using Bootstrap 3.1.0. When an "affix" gets too long for the viewport, it gets cut off, never showing bottom items.

Is there a possibility to have Bootstrap's affix behave in a way that it is still possible for the user to scroll the plete affix from top to bottom?

Problematic example:

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="list-group" id="sidebar">
                <a href="#" class="list-group-item">Long</a>
                <a href="#" class="list-group-item">list</a>
                <a href="#" class="list-group-item">with</a>
                <a href="#" class="list-group-item">many</a>
                <a href="#" class="list-group-item">entries</a>
                ...
                <a href="#" class="list-group-item">29. Last</a>
            </div>
        </div>

        <div class="col-md-9">
          ... regular content    
        </div>

    </div>
</div>

I hope my jsFiddle exemplifies this problem.

I am using Bootstrap 3.1.0. When an "affix" gets too long for the viewport, it gets cut off, never showing bottom items.

Is there a possibility to have Bootstrap's affix behave in a way that it is still possible for the user to scroll the plete affix from top to bottom?

Problematic example:

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="list-group" id="sidebar">
                <a href="#" class="list-group-item">Long</a>
                <a href="#" class="list-group-item">list</a>
                <a href="#" class="list-group-item">with</a>
                <a href="#" class="list-group-item">many</a>
                <a href="#" class="list-group-item">entries</a>
                ...
                <a href="#" class="list-group-item">29. Last</a>
            </div>
        </div>

        <div class="col-md-9">
          ... regular content    
        </div>

    </div>
</div>

I hope my jsFiddle exemplifies this problem.

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Apr 29, 2014 at 8:09 BENARD Patrick 31k1616 gold badges102102 silver badges108108 bronze badges asked Feb 11, 2014 at 1:56 AbdullAbdull 27.9k2727 gold badges136136 silver badges180180 bronze badges 1

• I don't know your particular use-case, but is it entirely necessary to actually have that many items in an affix that it's larger than a viewport? In your example, if I were to load the page with a smaller width viewport, then I have to scroll through that many elements because the sidebar gets loaded at the top of the page. I feel you would have much better results and user experience if you had expandable sections, and tried to minimize the size of the sidebar. – Kautiontape Commented Feb 11, 2014 at 4:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I hope it can help you :

Just add an overflow-y

Jsfiddle : http://jsfiddle/Ja3XT/1/

Added Css :

#sidebar{
 max-height: 100%;
 overflow-y: auto;   
}

UPDATE AFTER COMMENT:

fiddle : http://jsfiddle/F4FZL/1/

JS :

$('#sidebar').affix({
    offset: {
        top:100,
        bottom:0
    }
});


$('#sidebar').on('affixed.bs.affix', function(){
    $(this).removeAttr('style');
});

I had the same issue. I spent a few hours and finnaly I wrote the following solution:

$('#sidebar').on('affix.bs.affix', function (e) {
    var $this = $(this),
        affix = $this.data('bs.affix'),
        offset = affix.options.offset,
        offsetBottom = offset.bottom;

    if (typeof offset != 'object') {
        offsetBottom = offset;
    }

    if (typeof offsetBottom == 'function') {
        offsetBottom = offset.bottom($this);
    }

    if ($this.outerHeight() + $this.offset().top + offsetBottom === Math.max($(document).height(), $(document.body).height())) {
        e.preventDefault();
    }
});

You can see code at http://jsfiddle/F4FZL/10/ and play with demo at https://jsfiddle/F4FZL/10/embedded/result/.

Hope this information will be helpful.

In my case I had a really long sidebar on the left side which i wanted to be scrollable at anytime. For me the solution was even easier than the aforementioned solutions:

$('[data-spy="affix"]').on('affix.bs.affix', function (e) {
    e.preventDefault();
    return;
});

本文标签： javascriptBootstrap 310 affix too longStack Overflow