We Keep Coding

Improving scroll effect with one side scroll and the other change image based on scroll position

I created this scroll effect, where div is divided into left and right side - left side contains of images, that change based on scroll position and it's fixed and right side is scrolling content.
This is my idea:
https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css
To describe the sandbox - you can see that my scroll effect works, but right div scrolls only when mouse is on that right div, what I need is that content of that right div will scroll down also when mouse is on left div
I tried to make the whole container's position fixed so it doesn't move, but it did not work. Is there a way how to achieve it?
Here is example of what I would like it to be like:
(starts with STEP 1)
https://honextmaterial.com/process/

To achieve your goal in React, you need a combination of some CSS and the JS scroll event. First, assign position: sticky to the element you need to be fixed when it's about to leave the viewport. Then, using a React ref, you access the scroll position of the scrollable div and use that logic to set your image source (you should avoid accessing the DOM directly with getElementById in React).
Here's a working codesandbox example

You could do this basically with only CSS. You could make the right (scrollable) side overlap the left side with position: absolute. Then the whole area is scrollable. After that you'd change the width of the inner element to 60% and you'd visually have the same output as before. I changed your codesandbox accordingly: https://codesandbox.io/s/scroll-effect-forked-55qsf
The only downside is, that the left side is not clickable, scrollable etc. anymore. If you want to keep HTML & CSS like before, you'd have to capture the scroll-event and run some JavaScript code.

Scrollable div can't be scrolled when hovering a fixed element

We all know the 100vh jump on mobile browsers (CSS3 100vh not constant in mobile browser)
In order to prevent that from happening, I wrap the pages scrollable content in a separate div, which works great!
But I still need some fixed elements.
When you now hover the fixed elements and try to scroll, the scroller-div doesn't get scrolled, like body would have with "normal scrolling".
This is obviously really bad and can't stay like this.
It doesn't seem to matter if the fixed elements are siblings, predecessors or ancestors to the .scroll-wrapper. As far as my understanding goes whenever you hover a fixed element and scroll, the browser wants to scroll the fixed elements contents and the scroll-wrapper.
My ideas so far:
Either get a new solution for keeping the address bar from sliding away on scroll.
Or somehow scroll make the browser ignore the attempt to scroll the fixed element and instead scroll the element underneath it, while keeping the fixed element hoverable and clickable.
Or somehow pass on the mousewheel DOMMouseScroll etc. to the .scroll-wrapper
route 2. doesn't is not so promising and I just can't find anything to make route 1. happening, so .. any ideas on how to accomplish the 3. option?
Here is a CodePen to illustrate the problem. https://codepen.io/katerlouis/pen/LQeNbN

strange.. just when the text and CodePen were finished, I found a solution as a suggestion – How to scroll a scrollable div when scrolled on other, non-scrollable div?
solution 3. is possible!
the key is to grab the e.deltaY from the wheel-event on the fixed-elements, and add this to the .scroll-wrapper. If you want to do it with jQuery, the deltaY is "hidden" in e.originalEvent
$(".fixed-element").on("mousewheel DOMMouseScroll wheel MozMousePixelScroll", function(e) {
e.preventDefault();
$(".scroll-wrapper")[0].scrollTop += e.originalEvent.deltaY;
})

container is positioned from bottom all the time

Can anyone suggest me please an efficient way to make one container to stick out from bottom of the browser window and be positioned :relative, be scrollable
Can I do it in pure CSS or there is a javascript/jquery for that?

Unfortunately as far as I know you can only do this using JS.
You can get coordinates of the element to which you want to stick, and position it manually. You can update it by "scroll" event using jquery

What do you mean with scrollable exactly?
If you want an element to be fixed at bottom use "position:fixed;bottom:0;" the element will stay at bottom even when scrolling the window.

Javascript or Jquery: Scroll to Fixed position div

I want a html div which will scroll when user scroll down the page and it will get to fixed position when it's parent tag ends. For example:- See this link http://www.9gag.com/ they have alot to posts on one page. When we scroll one post and go to end of the first post, the title and share buttons become to fixed position and then the second post do the same and same for the next posts. Just exactly like that. How can we do this in Jquery or raw javascript or in css.

Maybe you want to try this plugin: http://labs.anthonygarand.com/sticky/ Sticky is a jQuery plugin that gives you the ability to
make any element on your page always stay visible by making the element to be floated when they has reached the limit.

$(window).scrollTop() will give you the number of pixels scrolled down in the browser, $('postcontainer').offset() will give you the x,y positions of a post container.
So if you bind an event to $(window).scroll() or to the mousescroll, you can check if the postcontainer's offset().top is less than the window.scrollTop. If it is then you start moving the item down relative to the post container. When doing this you need to keep track of the post container's height and the moving element's height to make sure it doesn't go down past the bottom of the container.
So if postcontainer.height - movingelement.position().top >= movingelement.height() then you need to fix the position of the moving element. Do the opposite while scrolling back up.
Hopefully this will get you thinking and starting to kick out some code.

This is the solution for your problem with a simple css property.
use position:sticky to follows the scroll.
Here is the article explained.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
and old way of doing this demo
with sticky position demo

Trying to recreate a slide in element when you scroll down

I'm looking for some guidance on how I can recreated a this feature. what it does is when you scroll past a certain point something slides in on the right. You can see it action here.
http://mashable.com/2011/08/19/hp-touchpad-lower-prices-canada/#comment-17611181
can anyone help me understand how that happens? The source code tells me nothing..

There probably is a jQuery plugin that does what you need already, but since I don't one, here's the basic procedure:
Set scroll-event listener on the window: $(window).scroll(function(){…});
In that event listener function, check the window.scrollY property which is how many pixels the page is scrolled down
If that value is above/below a certain threshold, show/hide the sliding element respectively
You can also use window.scrollY + window.innerHeight to find lowest pixel position that's visible in the browser. And you can then compare that to the position of some element low on the page. For instance, if you want the sliding element to appear when the user scrolls to the bottom of the main content, check whether the content element's lower edge (i.e. top-offset + height) is less than scrollY+innerHeight. If it is, then the user has scrolled to or past the content element, and you can slide the element in.
The sliding element iself should be styled with position:fixed (which won't work in IE6, by the way, but there are ways around that) and anchored to the rigth/bottom of the window. The sliding animation should then animate the right position from negative the element's width to zero, to slide it in (the opposite applies when hiding it)
Here's a simple demo (no animation, just hide/show)