How to let a div 'Fixed' be limited by a main div?

Asked

Viewed 446 times

0

I’m trying to do something like this: https://www.chipart.com.br/computadores/monte_seu_pc where the div containing the purchase values is fixed only while the customization options are visible, but I think it is not possible to do this with 'Fixed', the only thing I have been able to do so far is to leave this 'box' with the values fixed throughout the page.

Would anyone know to tell me any solution?

jquery html css

  • Take a look at this... http://getbootstrap.com/javascript/#affix

3 answers

2


You can use the jquery plugin Sticky-Kit.

Sticky-kit fixes the elements on the page when the user scrolls so that this element is always visible.

With it just select an element and apply a function:

$("#sidebar").stick_in_parent();

Practical example:

http://jsfiddle.net/jomar/w4Lu98nd/1/

  • 1

    Sorry @mdma, I wanted to reply suggesting the same plugin, but not to "duplicate" I added just one example of the use in fiddle. :D

0

You can try using jQuery:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > POSIÇÃO_Y) {
         $('.sua_div').addClass('fixed');
     }
     else {
         $('.sua_div').removeClass('fixed');
     }
});

So whenever the page scroll goes past the POSIÇÃO_Y, the div will have the class .fixed, there in CSS you declare this class to be with position: fixed

-1

Just create a div fixed that appears and disappears using the display:none. This also happens in pc gamer.

  • Do you have how to deepen your answer? You can make an executable example using the snippets here from Stack Overfllow

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.