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
Related
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.
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.
I've been trying to figure out how to create a sticky scroll effect on two images, basically like this: http://www.nationalgeographic.com/americannile/
(scroll down to see you will see the four images with sticky scroll effect)
I have tried some jQuery plug-ins but still couldn't figure out how to create the effect I wanted.
Any help would be greatly appreciated, or just a point in the right direction.
Many thanks
What You want to do is apply some actions when document scroll position changes. Since You are using jQuery, there is plugin exactly for this functionality called ScrollMagic, and here are the demos.
The link you posted uses the scrollr library:
https://github.com/Prinzhorn/skrollr
I've also used this library and I just can recommend it to you. It is really easy to use, for basic animations you don't need any javascript, everything is done via data- attributes.
It even supports mobile devices to some extend.
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?
Very cool JS components: http://www.msnbc.msn.com/id/40664031/ns/us_news-crime_and_courts/
Check out the icons next to the vertical scrollbar in your browser, and the expanding 'sharing' toolbar at the bottom.
Does anybody know if these are publicly available components? Has anybody seen these before?
Edit: I'm talking about:
The way the sections in the bottom bar expand into tabs to show more controls. Try clicking on "Login and settings", for example.
The way the links near the scrollbar take you to the respective sections. Very cool tool to aid user discovery in a long page.
I was intrigued by the scroll markers used for jumping around the page so I made a start at replicating the functionality in a plugin:
https://github.com/sj26/jquery.scrollmarkers
It's definitely not pretty yet, but it's a start.
Its a private library built by Krux Digital, Inc.
I dug into the source of http://cdn.krxd.net/krux.js
Its ajax tabs..
Also, you can have a bar fixed at bottom of page simply by using
position:fixed
property in css, then in the div at bottom, impliment jQuery.tabs, and for each tab load data via ajax. Wont be that difficult. and if MSN has implemented it, they would have surely spent a lot of time on it