Scrollbar with points
Can someone explain to me (or has a good tutorial for it) how this scrolling thing works? I don't know how I should google it.
This looks like a side scrollbar, and when I scroll down, it switches one Point down, and the page changes. Are there thew tutorials on how to create this? Please send me some info about it, because I really wanna know how to create this.
There is an other question that may help you:
Scroll to a specific position on a page using Javascript / Jquery
and I think these links may help you:
https://www.codespeedy.com/scroll-to-a-specific-position-in-javascript/
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
They speak about:
.scrollTo
scroll-behavior
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
You better read all articles.
Related
As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.
Short version: This works
$(document).on("click",".Container",function(){})
This does not:
$(document).on("scroll",".Container",function(){})
Long version:
I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
I need to trigger a function when the content is scrolled, both up and down and on the fly not just past a certain point.
I can still scroll, it just doesn't trigger as an event.
I've tried everything I've found to no avail, from my short experience and what I've been reading I think it might have to do with how scroll doesn't bubble up the same as click, but I have no idea what I should do or try with that information.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
Thanks in advance for all the help.
Beyond this point I'll edit with suggestions that didn't work--
I think it's because the scroll event doesn't bubble and you are adding the listener as delegated, you should add it directly:
$('.Container').on('scroll',function(){});
More info about this in:
https://api.jquery.com/on/
With help from #A. Wolf and #M.Doye I found something that works. While it doesn't help understand what was wrong at least its working.
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
insert magic spell here
}
},true);
I would like to create an effect similar to the one on this website - http://www.esalen.org/ (please scroll down this website's homepage).
I have read on StackOverflow that this could be achieved using Parallax scrips, but haven't found anything similar.
Could anyone help?
Thank you!
Read this tutorial at http://line25.com/tutorials/create-a-cool-website-with-fancy-scrolling-effects
There's a preview button called "view the final fancy scrolling website".
Check this out, maybe it's what you are looking for.
I am trying to find a decent tutorial or code sample of how to achieve a common effect I see around the web. Essentially its having an element attach itself to the top of the window when it meets the element while scrolling. Quite frankly I have no idea what to call this functionality, or how to go about searching for the specifics of achieving it.
Here is on example, from the Twitter Bootstrap Docs. The bar under the heading & sub-heading will attach itself to the window as it scrolls past to help you navigate the page.
Another example is on the Android Developers Pages. The left side navigation element will attach itself to the window on scroll.
Any assistance in this is greatly appreciated.
Thanks in advance & cheers!
Check out jquery-waypoints and the Sticky Elements Example.
use position:sticky for sticky elements.
Here is the article explained.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
sticky position demo
We're using this autoscroller script: http://scripterlative.com/files/autodivscroll.htm (the bottom version).
However, we got really stuck since we don't know how to replace the moving "scrollbar" on the scroller side with a pure and simple line with up arrow on top and bottom arrow on bottom.
Functions wise we want this sidebar to behave exactly like the original sidebar and of course be cross browser compatible. We just want to get rid of the original scrollbar and replace it with a much cleaner and more stylish style.
Is this doable?! How?
Best regards Stefan
Just found jScrollPane on AjaxRain.
Implementing an autoscroll would take some coding, but should definitely be possible by just sending the click messages to the div manually so that it would do the scrolling. If it looks like this will suit your needs, I'd chip in with some additional implementation code. That topic may actually be better suited for another question, if you decide on jScrollPane.
Edit: updated link above. also, there are demos there for scrolling on hover and clicking on a link to jump to an anchor. Custom code for an autoscroll should be relatively simple to write from there.