问题
I'm playing around with Skrollr and for the most part it seems pretty intuitive, the one thing that kind of gets me is the data-anchor-target attribute. Most times I don't need it but when I look at some examples it's usually included and I'm confused as to what it does. Does it just mean that at that target, that's when the Skrollr data-(pos) attributes kick in?
回答1:
data-anchor-target
When using Skrollr.js, you normally use one of two methods as inputs for starting and stopping scrolling controls:
- Absolute positioning, relating to the start or the end of the entire document.
- Relative positioning, relating to the top, bottom or center of the viewing browser frame.
The data-anchor-target
tag enables the developer the freedom to use an alternative element to trigger a modification. You place the control position directly inside the document. Elements are identified to the target tag with simple CSS selectors (.class or #id's). When the data-anchor-target
tag element is scrolled into the viewing window, the developer can use the normal relative mode data-bottom-top
tag to start the desired scrolling result. Use data-top-bottom
as a control for when the data-anchor-target scrolls up and out of the viewing window. Remember this image?
This is way cool, as this enables perfect control for different viewing devices, orientations and screen sizes. Take a look at the anchor-target.html example. Notice how the blue face smiles whenever the red face is visible in frame? (Note: don't get freaked out by the !0
CSS identifier in that sample. Remember in skroller, the !
exclamation symbol is used to fix a numeric field from modifying during scrolling. )
来源:https://stackoverflow.com/questions/23621281/what-exactly-does-data-anchor-target-do