We Keep Coding

Topbar covering webpage header

I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?

Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.

Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)

Trying to create a Responsive Scrolling Sticky Menu

I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White

Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.

Transforming navigation bar to a fixed header over horizontal parallax website

The title may seem a bit peculiar but I will try explain as best as possible so confusion is minimized.
Currently I am using the FullPage.js plugin with my website to create a horizontal 'slide' effect. Check the website out currently to see what I mean. http://carrotcrunchpvp.comule.com/
As you can see the navigation bar is slap bang in the middle of the page when you enter where everything is rotated and such. When I slide to the right using the arrow, I want the navigation bar to 'push' out so the Ethos link goes to the top left, privacy policy link goes adjacent to this (horizontally), then the path to healing. Then the logo will shift directly upward to form the middle of the navigation bar. NZ catholic church will shimmy to the right and up adjacent to the logo, contact us will go slightly further to the right and the about page will reach the far right of the navigation bar which will be all located at the top of the page. This will essentially be creating a header navigation bar
Look at illustration for a better idea:
The black lines are the path of transformations. However it's not as easy as it seems, I could do this with CSS3 transformations too...
Now my problems, I'm capable with CSS, but my Jquery and Javascript knowledge is lacking. I'm unsure as to how to approach this. This is because I only want this transformation to occur when clicking from the homepage to the next page or one of the other pages with more content. It will essentially be turning into a fixed header. However when I go back to the homepage it will need to animate backwards to the original navigation bar...
How would you go about this? This is a task my I.T teacher has set me to do over the holidays and I'm struggling to figure how to logically do this.
If I've missed anything or you're still confused on what I want to achieve, feel free to comment and I will try clarify. To the mods, it's a subjective topic, I'll agree - but it's a topic which spreads creativity and shouldn't be frowned upon and looked at for closure - IMO...

You should be using the callbacks fullPage.js provides such as afterSlideLoad or afterSlideLeave.
If you do not want to deal with javascript at all, notice how fullPage.js is updating the class fp-viewing-xxxx in your body element.
You can use it to fire your animations depending on the active class.
When you load the site it will be empty.
Going to the second slide will add the class fp-viewing-horizontal-1 in your case
Going back to the home again will now load fp-viewing-horizontal.
In css you could something like:
body .menu,
body.fp-viewing-horizontal .menu{
//your home menu styles/animations
}
body.fp-viewing-horizontal-1 .menu,
body.fp-viewing-horizontal-2 .menu,
body.fp-viewing-horizontal-3 .menu,
body.fp-viewing-horizontal-4 .menu,
body.fp-viewing-horizontal-5 .menu,
body.fp-viewing-horizontal-6 .menu,
body.fp-viewing-horizontal-7 .menu{
//your fixed menu styles/animations
}

implementing a floating sidebar in HTML, which stays visible within the boundaries of page header and page footer

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.

when the page scroll to certain point, how to make a second fixed header appear

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.