bootstrap - how to make a div always visible on scrolling

Question

I'm trying to find a way to display a div, allays visible for a user. Scrolling.. that's my problem, see:

This div should stay under div.left2 while scrolling down and get back to his original position while scrolling up.

    <div id="wrapper">
    <div id="l">
        <div class="left">
            <p class="trigger">Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1 Lorem...1</p>
        </div>
        <div class="left2">
            <p class="trigger">Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2 Lorem...2</p>
        </div>
        <div class="thisone">
            <p>This one should stay always visible
                <p>
        </div>
    </div>
    <div class="right">
        <p>Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem... Lorem...</p>

    </div>
</div>

any suggestion welcome thanks

Try this one : "http://stackoverflow.com/questions/1638895/how-do-i-make-a-div-move-up-and-down-while-scrolling-the-page" Hope it helped :) — Daniel Bejan, Jul 22 '13 at 13:43
probably use `affix` http://twitter.github.io/bootstrap/javascript.html#affix — Rene Pot, Jul 22 '13 at 13:43

score 11 · Answer 1 · answered Jul 22 '13 at 14:05

11

Use Bootstrap Affix, here is an example : http://bootply.com/62673

answered Jul 22 '13 at 14:05

Pascamel

953
6
18
28

nubinub · Accepted Answer · 2013-07-22T14:24:46.013

7

var top = $('.thisone').offset().top;
$('.trigger').click(function () {
    $('.thisone').css('position','');  
    $('.left2').toggle('slow',function(){
        top = $('.thisone').offset().top;
    });

});



$(document).scroll(function(){
    //calculating the minimal top position of the div
    $('.thisone').css('position','');
    top = $('.thisone').offset().top;

    $('.thisone').css('position','absolute');                 
    $('.thisone').css('top',Math.max(top,$(document).scrollTop()));
 });

This should do the trick. http://jsfiddle.net/966Uy/11/

Edit: Made a few adjustment cause a bug could appear if the user scrolled during the animation.

edited Jul 22 '13 at 14:24

answered Jul 22 '13 at 14:07

nubinub

1,898
2
15
23

it's works but in your solution @nubinub after scrolling up again, .left2 is hidden under .thisone – Jul 22 '13 at 14:24
Are you sure ? It seems to work well here. Maybe you scrolled during animation, but i corrected this bug. – nubinub Jul 22 '13 at 14:26
yep... works fine, only after scrolling dawn and up again, when triggering .left2, .thisone stays for a time of animation under .left2. thanks @nubinub – Jul 22 '13 at 14:41
Maybe `slideToggle` instead of `toggle` would have a better look on your browser. – nubinub Jul 30 '13 at 12:01

bootstrap - how to make a div always visible on scrolling

2 Answers2