I'm trying to build a sticky header with next and previous button in my site.
Initially there is no sticky section but when the user scrolls down the menu hides into a hamburger menu and the sticky element comes up. On further scrolling the sub section titles like Features, Contact Us, etc... are updated .Also we we can goto next and previous section as shown in the image.
So, how do I build this or is there a plugin that I can make use of?
Thank you.
Sticky Things
Sticky sections can be achieved using a combination of regular HTML, regular CSS and a Javascript plugin like sticky.js here. Using it you can use JS to attach a CSS class to certain HTML sections when a visitor is scrolling.
You can then style the CSSaccordingly to display / or hide certain sections of the page on scroll and thereby override / rewrite the original positioning.
Previous and Next
To achieve a previous and next button you could link those manually using HTML as well - which would be quite some work. If you look for dynamically linke site content you should have a look at static site generators like Octopress, or Jekyll - or consider using a CMS like Wordpress.
Edit: If you mean "jumping" up and down from one section of the site to another you can look at HTML anchor links
I have done a sticky header and a previous / next button in the footer for my website using Jekyll with some manual modifications. You can have a look at my blog on Github to see how I solved it.
Besides this it is not easy as there is not default solution to what you are trying to do. It fairly depends on your constraints, preferences and skills.
Related
I found this website and impressed on it https://kvellhome.com/
what technology do I need if I want to create a website like that
Is it Ajax? (I tried to remove some article but it can reload itself when I changed article back)
HTML5 history (I found that it can reach by direct link)
Ok, I think this can guide you to the right direction.
1- the homepage is a simple landing page that usese some animations to change colors and display text.
2 - when clicking on discover, it slides on the right and initialize a second slider that uses the projects's name as navigation dots (can easily be done using css pseudo elements using data attribute as content)
3 - you click on the project itself and it load a parallax page for that specific project.
Menu | contacts | about are pretty simple, they are pages on their own.
Some libraries you could possibly use:
fullscreenjs (to create the fullscreen pages and sliders. the home page can be the first slider and then on the second page you initialize a slider inside a slider (so that the animation to the right looks like the one on the website you provided)
animatecss to animate stuff
parallax for all the parallax effects
I think this is personal preference, but if I had to do a website like that, I will tackle it this way. Hope it helps
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)
I'm using Bootstrap on a site and on the desktop view I leave the Navigation bar stuck at the top. I'm wanting the section links to leave this gap in place (60px I believe). So when I have a...
Section Link
Is there a way to have it respect the 60px that the top navigation bar consumes?
NOTE: If it's relevant the site is currently using Bootstrap 2, but I'm in the process of moving it to 3. If the solution is different between the two...or if one version inherently does this I'd love to know the differences.
EDIT: I'm wanting the element I'm linking, to have the gap above it not the actual a tag itself. Also, I could care less if it's a JS or CSS solution. If someone has JavaScript disabled I'm fine with the slight annoyance of it's current appearance for them.
Add style="margin-top:60px" to your tag - this will lower its position
or place it inside a div tag
ex:
<div style="top:60px">
Section Link
</div>
EDIT
I hope i understand the question now, if not, sorry
you can put this javascript on the page
if (window.location.href.indexOf('#') != -1){
window.scrollBy(0, -60)
}
this way, the page finds the desired section then scrolls down 60px as soon as it loads, making the section header appear below the Nav bar
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.