Website: http://revelationcraft.com/
In this page I want the top menu to stay on the top of the page when a user/member scrolls.
I'm wondering if this is possible if so please tell me how.
Add position:fixed; to div#ln-bar.
There are many questions on this such as this: How to create sticky header bar for a website
It is called a sticky header and can be created in many different languages such as css, and jQuery. All you have to do in this case is create a div for your header and use this: position:fixed;. All you have to do is make the z-index higher than any other div or class so you don't have any troubles with this, unless of course, you want to have that happen.
Related
Essentially my website has multiple parallax scrolling panels, so basically a picture embedded within a div element, and splitting between two of those panels, I have a navbar which I want to affix to the top of the screen... now I have that completed but the navbar isn't on the top most layer and all the other divs on the screen go on top of that, there is a "demo" or my site which you can see this actively happening. I'm not sure how to either move the rest of the elements down without messing up the parallax or bringing the z value of the navbar up above all other elements... Any help would greatly be appreciated!
(I've had this problem on other sites before I've created and I've never been able to figure it out)
My Website (Github.io) / demo
You can use the CSS z-index property to achieve what you're looking for.
Simply add a high z-index property value to the navbar selector, like as follows
.affix {
// pre-existing properties
z-index: 999;
}
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.
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 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.
I'm building a touch-enabled html app and decided to use iScroll for scrolling within a div.
essentially, I've got two seperate scrolling divs but the scrollbars are always placed on the far outside of the page
http://jsfiddle.net/SRXMn/3/
the problem I'm having here is two-fold.
1) the scroll bars are both on the far right side (which doesn't make much sense for the left-scrolling content
2) the scroll bar extends all the way to the top of the header, when the only content being scrolled is below
when I set 'position:fixed' on the header, it shrinks down to a tiny size, and I can't seem to over-right that.
You could try using position:relative on div.scroll_hold