I'm using fullPage.js (which is a great plugin) to create a photo gallery page. The problem is that this page has a header and a footer, they're not fixed, but they need to appear on this page. What should I do?
I already tried normalScrollElements, but with no success so far.
My structure is:
[header - not fixed]
[scrollable content]
[footer - not fixed]
Any ideas?
the property that you try to use is not planned for that:
normalScrollElements: (default null) If you want to avoid the auto scroll when
scrolling over some elements, this is the option you need to use. (useful for
maps, scrolling divs etc.) It requires a string with the jQuery selectors for
those elements. (For example: normalScrollElements: '#element1, .element2')
It just prevent the scroll of your content page if this one also contains a div with a scroll.
I used a bit this plugin and it am pretty sure it scales on your browser window resolution (its a fullpage plugin after all), best advice for you should to put your header/footer in fixed position or as Jonas said, duplicate your header and footer in each section, but they will scroll with the content pages :/
The plugin is a full page plugin as its name says. You won't be able to have a header and a footer which you can reach by scrolling unless those are full page.
Make your header and your footer fixed or add the header in the first section and the footer in the last one. (absolute positioned to a relative section)
Related
I'm looking to create a blog page similar to stripes documentation. When the user scrolls the page, I would like to trigger different highlights on the code. Check out stripes documentation here and see that the code gets highlighted based on the content when you scroll. Is there a library that does this already, or what is the best approach to tackle this myself?
It's basically a combination of a sticky element (the code container) and linking the scroll position with css styles using JavaScript.
Here you can find more information and a nice demo for such purposes: Scroll and let content stick while animating
To sum it all up, the mechanism of how it works is really just:
1. A scrolling container
2. position: sticky;elements
3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements
4. (Sometimes) CSS transition property
I have seen several questions about floating or fixed sidebars on Stackoverflow, but I could find none that covers this scenario.
Take a look at this page as an example: http://msdn.microsoft.com/en-us/library/aa691131(v=vs.71).aspx
When the page is scrolled up, the sidebar also scrolls up with it, until its top edge hits the top of the window. As the scrolling continues, the side bar stays fixed in its place until the page footer reaches up and pushes the sidebar up with itself.
Therefore, the sidebar is always trapped between the page header and the page footer, but within that limitation, it tries to stay visible as much as possible.
This is done by using javascript. I was wondering if you guys have already achieved something like this, or if you know of a solution, that you can share here.
Thank you.
This is a great tutorial on how to acheive this effect through jQuery... http://www.hongkiat.com/blog/css-sticky-position/
It uses jQuery .addClass() to add a class to the element when a certain scroll position is reached.
And the respective .removeClass() when the user scrolls back past.
I have a few elements and I am using Stellar.JS to make elements slide while scrolling - Parallax.
Here is the example:FIDDLE
I would like headline Trainers to go UP while scrolling. I've used data-stellar-ratio="2" on it, but it's not working.
Your fiddle is not correctly set up. You can't link a github ressource (go to http://cdnjs.com/ to find linkable ressources), and you didn't select jquery framework. Here's a corrected one :
http://jsfiddle.net/hCKG9/1/
Moreover, to make elements "parallaxed" with Stellar.js, you must give them a position, like position:absolute (or relative, or fixed)
Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238
I have a page that will be responsive and I also want to add a header that appears once the visitor scrolls for a bit. The header will supplant the main header in order to be visible as the user travels down the page.
I think this was a convention that people have used, and I need some help, as i can't really code it from scratch.
Has anyone seen examples or tutorials on this. I've looked but can't come up with it.
Check out the Twitter Bootstrap framework's Navigation header http://twitter.github.com/bootstrap/components.html#navbar
Static top navbar Create a full-width navbar that scrolls away with
the page by adding .navbar-static-top. Unlike the .navbar-fixed-top
class, you do not need to change any padding on the body.