Trying to recreate a slide in element when you scroll down - javascript

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)

Related

Changing scroll direction for each section

Now I’ve seen this page from webflow, which has inspired me much.
In this page, you start scrolling horizontally, then when you reach a certain area, the scrolling direction changes so that the page starts scrolling vertically.
Is there a way to do this?
(Preferably vanillaJS, but jQuery would be fine)
Basically there is not a set-up solution built into standards or jQuery (and I don't really recommend to use jQuery). I haven't searched if there is a library to do this (I suspect there is, and you should use one if possible instead of building by hand) but I'll try to roughly explain what it uses in vanilla JS/CSS.
We can construct a really long element (that includes the contents you want to reveal by scrolling), and use some cropping mechanism so that only a portion of it is displayed. This is basically done with overflow: hidden;.
Next this long element should move with scrolling. Adding an onscroll event listener that adjusts the transform property (spefically, translate functions) would do that.
These element should behave magically: they scroll to a position, stop and stay there until they reach another scrolling position, where they continue to be scrolled away. This is accomplished with the position: sticky; CSS property. See what MDN says:
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This is somewhat hard to understand but the key is that it stays where it is as if it was a normal element until reaching the position you have set through top/bottom/left/right properties. Then it stays at that position until it's scrolled away together with its parent element (the "nearest scrolling ancestor").
So now you have an element that
Is really long but has only a portion shown
Can move as mouse scrolls so that users see more as scrolling
Stays in a fixed position through a part of the page and then scrolled away
which is basically the effect you want.
These three steps are the basic building blocks of such fancy effects you mentioned. There should be of course many nasty implementation details that I haven't outlined here but I hope this answer help you briefly catch what's happening under the hood.

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;
})

Can someone explain to me how setting a set amount of pixels the scroll function can scroll down/up to using jquery works?

$(window).scroll(function(){
// scroll 100vh down on first scroll
// scroll another 100vh down on second scroll
})
I've seen a plugin that does just this but I want to be able to understand how the logic works. Can someone please explain it to me or at least point me to a site where it can be explained further?
$(window).scroll(function(){ //Function called when window is scrolled.
})
JQuery Scroll
The scroll event is sent to an element when the user scrolls to a
different place in the element. It applies to window objects, but also
to scrollable frames and elements with the overflow CSS property set
to scroll (or auto when the element's explicit height or width is less
than the height or width of its contents).
When the width/height of a div is more than the available width/height of the device browser will provide you a scroll bar to scroll down and see overflowed elements.
Jquery scroll allows you to listen to a event when a user scrolls inside the selector provided.
It will call your handler (function) that you passed as a parameter to the scroll function of jquery.
Further, you don't need to scroll an container manually. The browser will automatically scroll the contents of the overflowed container but you may want to increase the step of scroll by the scrollbar.
How do you increase the step?
Normally, when you scroll the scrollTop property of your scrollable container changes with a fixed step (1-10px).
This scrollTop property decides how much of content is overflowed from the top of the srollable container and shows more pixels from the bottom of the container its like a viewport.
So, you can add more number of pixel to scrollTop and scroll more than default.
Checkout this answer of mine

Animated Scrolling with SuperScrollorama + Greensocks

I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.

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

Categories