On this website: http://www.apple.com/ca/ipad-pro/ is the apple website. On the top of the page you will see two navigation bars. The top one which is the main one and one underneath it that appears after you scroll down out of vision past the first one.
I understand this process is simple but I can't figure it out!!
Can someone tell me how they made the second one "fixed" AND stay at the top of the page?
When I try this my navigation bar has a space between the top nav and bottom nav. Pretty sure it's Javascript but I don't know enough. Thanks
You're basically going to change the attributes of the secondary nav to position: fixed; top: 0; once the user scrolls past a certain point. Check out this tutorial:
https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2
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;
}
Before i start, I wanted to let you know that I have been searching high and low for a solution to my issue but the closest thread I've found is unfortunately without the answer to the actual problem - Position absolute inside div with overflow-x scroll and overflow-y visible
Essentially I got main page where I am dynamically loading some other pages and on some of them I used dropdown listboxes. It happened that I haven't noticed it earlier as content any of the pages wasn't wide enough for me to spot the problem.
The problem I face is absolutely positioned div (which contain dropdown) and visible horizontal scroll bar on the parent of this div. When I scroll my page horizontally the dropdown div stays in the same place on the screen. I read about "popping out" absolute divs under this link:https://css-tricks.com/popping-hidden-overflow/ but even there, I can observe similar issue I am currently facing, which is appearing of the vertical scroll on the parent element. I am trying to achieve similar effect like here:
http://jsfiddle.net/matcygan/4rbvewn8/7/ but stop vertical scroll bar to appear when the listbox is expanded - instead it should overflow the box and party cover horizontal scroll bar. Here I've found another prompt example how can I achieve it http://jsfiddle.net/b5fYH/ but when i try to play with it and make red boxes scrollable with content as well as overflowing outside of the content vertically, without creating vertical scrollbar, I am failing... I am also fine with using JS if CSS on it's own can't deliver such effect.
In the end after 3 days battle, the CSS won and I need to ask for a help...
Any support will be greatly appreciated.
Thanks in advance.
I have a strange question -- my apologies if it is a silly one. Please note the code it too large to reproduce in a snippit so I am posting the link here.
The page I am building is a small intranet page with a full width header. When the user clicks on the button beside the submit button, a div from the top opens and pushes the content down. My problem is in my code editor there is no scroll bar on the page, so when the div opens it pops the entire page slightly over to the left to compensate for the scroll bar.
On codepen, I've pasted the shell of the site, but because a scroll bar is included in its code area, the problem cannot be reperoduced exaclty.
Is there any way I can compensate for the lack of scroll bar in my code? Perhaps force one to be there?
Any help would be grand.
You can force a vertical scrollbar by adding the following CSS rule to the body:
overflow-y: scroll;
EDIT: I misunderstood your question.
Have the whole moving element absolute positioned and wrap it around a container. The scrollbar will appear on the wrapping container, not on the element itself. And because it will be with position absolute there won't be any change of position once the scrollbar appears.
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
}
This is kind of difficult to explain so ill link to a page that has the effect i need;
http://wpaoli.building58.com/wp-content/uploads/2009/08/feedback-panel.html
The feedback thing on the left side is what im trying to implement on my side,
instead of feedback im going to use it as a navigation menu that shows up when clicked on.
the things above is what i have right now.
my problem is when i scroll to the right ( my page is around 6000px wide )
i want it to stay on the left side,
is there a way to pull this off?
(this is to much for my brain to handle)..thanks!
Set the div to have a "position:fixed" style and then set "left:0px;top:0px". This makes the div stick to the top left of the browser instead of its relative position within the HTML flow.
Have a look at this example page, it has 2 fixed elements, one at the top left and the other at the bottom right:
Fixed example
You can use the exact same design, only use position:fixed on the feedback-panel.