Scroll content of fixed element along with parent

Exception

Question title might be bit confusing, but please have a look at this fiddle for more info.

I have a container with scrollbar and one element fixed left to it. When I am scrolling I would like to make fixed element content also scrolling. Here is the code

 $('.parent').on('scroll', function(){
   var top = $(this).scrollTop(), _top = $('.right').offset().top;
   $('.left').animate({
      scrollTop : top - _top
   },0)
 });

Please refer to fiddle for demo.

This is working but there is some non uniform scrolling and I am unable to fix it.

lemieuxster

I think the extra subtraction of _top is causing the uniformity issue, since it is recalculating the offset top each time, and continually subtracting it.

$('.parent').on('scroll', function(){
    var top = $(this).scrollTop(), _top = $('.right').offset().top;
    $('.left').animate({
        scrollTop : top
    },0)
});

Appears to let the scrolling be more uniform, minus some padding issues.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Get the parent element html along with child content

From Dev

scroll property in a child element of a parent div whose position is fixed

From Dev

Keep element position fixed to parent using transform on scroll

From Dev

How can I make a fixed div go across parent element without covering vertical scroll?

From Dev

Keeping the page vertically fixed on an element, when lots of content is revealed above (so causing scroll)

From Dev

Fixed div outside of parent element

From Dev

Scroll parent to top of child element

From Dev

How to scroll with ionic and have fixed content above

From Dev

Sidebar which can scroll but with the main content fixed

From Dev

Fixed Header and Footer not allowing page content to scroll?

From Dev

Scroll to the right in element with fixed width and hidden overflow

From Dev

Keep element fixed at top of page on scroll

From Dev

Force div within fixed element to scroll horizontally

From Dev

Freeze element (position:fixed) for specific scroll range

From Dev

Fixed element in Bootstrap Modal doesn't scroll

From Dev

wrap content inside parent element

From Dev

offset().top is not working as expected in if parent element is fixed

From Dev

Element position fixed is related to parent instead to the viewport

From Dev

Detect when static element overlaps fixed element position on scroll

From Dev

CSS fixed element appears underneath content

From Dev

Scroll element to the top of an overflowed parent container

From Dev

scroll to next element with same parent class

From Dev

How to add scroll auto on overflow in case the parent as `fixed` position

From Dev

jQuery scroll content at specific class element

From Dev

Fixed header on scroll but submenu needs to push content down

From Dev

css make background image position fixed and scroll content up

From Dev

How to make web page content scroll over a fixed header?

From Dev

How to keep panel height fixed with scroll if content overflow for JQuery Mobile

From Dev

how to make content to be fixed inside scroll div using only css?

Related Related

  1. 1

    Get the parent element html along with child content

  2. 2

    scroll property in a child element of a parent div whose position is fixed

  3. 3

    Keep element position fixed to parent using transform on scroll

  4. 4

    How can I make a fixed div go across parent element without covering vertical scroll?

  5. 5

    Keeping the page vertically fixed on an element, when lots of content is revealed above (so causing scroll)

  6. 6

    Fixed div outside of parent element

  7. 7

    Scroll parent to top of child element

  8. 8

    How to scroll with ionic and have fixed content above

  9. 9

    Sidebar which can scroll but with the main content fixed

  10. 10

    Fixed Header and Footer not allowing page content to scroll?

  11. 11

    Scroll to the right in element with fixed width and hidden overflow

  12. 12

    Keep element fixed at top of page on scroll

  13. 13

    Force div within fixed element to scroll horizontally

  14. 14

    Freeze element (position:fixed) for specific scroll range

  15. 15

    Fixed element in Bootstrap Modal doesn't scroll

  16. 16

    wrap content inside parent element

  17. 17

    offset().top is not working as expected in if parent element is fixed

  18. 18

    Element position fixed is related to parent instead to the viewport

  19. 19

    Detect when static element overlaps fixed element position on scroll

  20. 20

    CSS fixed element appears underneath content

  21. 21

    Scroll element to the top of an overflowed parent container

  22. 22

    scroll to next element with same parent class

  23. 23

    How to add scroll auto on overflow in case the parent as `fixed` position

  24. 24

    jQuery scroll content at specific class element

  25. 25

    Fixed header on scroll but submenu needs to push content down

  26. 26

    css make background image position fixed and scroll content up

  27. 27

    How to make web page content scroll over a fixed header?

  28. 28

    How to keep panel height fixed with scroll if content overflow for JQuery Mobile

  29. 29

    how to make content to be fixed inside scroll div using only css?

HotTag

Archive