Like in Yahoo.com, when we scroll the page downwards its Search Box gets stuck to the top of the window on a particular scroll location? How to do that, Is it possible using css?
You need to have a container div for the div that will be fixed. The div that you want to show always at the top will be inside this div like this:
<div id="fixedDivWrapper">
</div id="scroll">
This stays still!
</div>
and your css:
position: fixed; /*This fixes it to the top of the div.*/
top: 20px; /*Margin at the top of the fixed div*/
A neat CSS/JavaScript solution.
You should define
position: fixed;
top: 10px;
left: 20px;
this will hang div 10px from top and 20px from left and it will stuck there during page scroll.
Also you should add some other properties you want, - maybe display: block; and other parameters.
position: fixed;
However be aware this dosnt work in IE6 or iOS Safari < 5.
Here is a very basic demo that does exactly what you want. Using jQuery to simplify tasks but this is simple enough you could make it pure JS if you wanted.
http://jsfiddle.net/sg3s/uU8Wb/
What this does is simple;
It saves some variables I will need later & never changes in variables like the offset to the top initially.
Binds an event to the scroll event of the window, in the event we do a simple check to see if the current position from the top is more or less than the offset of the element we want scrolling with the window.
If the scrolltop is more and it lacks the class it should have at that moment we assign it, css does the rest, and the other way arround when the position from the top becomes less than the original offset of our element.
Simplicity is all the magic here, if we can do both tasks with CSS but need to choose between when each state is active we simply write a script that switches a class rather than relying on JS to do it all.
Related
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
If you click here: http://www.ideagasms.net/index2 you'll see the nav menu surrounds the banner image, like a frame. It was put together that way using three div's, two of which are css rotate 90 deg, position absolute. Of course, as soon as you resize the window the navmenu breaks.
There must be a better way to build a frame-like menu. A couple suggestions, or examples, I just need ideas on how to build something like this. Maybe a jquery solution or something would do the trick.
You can change #nav-left and #nav-right positions to absolute, then center them with left: 50% (like you did with #headerwrapper), and correct their positions with margins, for example margin: 0 auto 20px 122px for #nav-right.
Mark their parent element with position: relative; (but without any top/left/bottom/right propertes), that way the rotated navigation elements will be positioned within their parent rather than the window.
However, I think your navigation concept is novel, but terrible (and also visually unappealing) from a usability perspective because people can't read rotated English text easily.
I'm noticing a lot of sites are recently implementing new types of scrolling effects. Here's one example:
https://banksimple.com/
When you first start scrolling the initial section stays in place (z-index of 1?) while content scrolls over top of it. It also uses fragments and dynamically highlights it's navbar depending on what area the user has scrolled to.
I've seen a few sites use similar techniques. One (which I cannot find the link to) changes the background dynamically.
Is there a common technique used for these types of sites?
The first two sections are using position:fixed.
This fixes the items to a position on the page. They don't move, even with scrolling.
The scrolling section uses position:absolute with a high z-index.
This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.
There's several ways to do this, but the easiest is to simply make a div, and use the CSS
"position:fixed;"
property. This will cause the div to stick exactly where it is, relative to the browser window.
You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.
For the menu and header, it's a simple CSS solution using position: fixed and z-index. Both menu and header has position: fixed, while the menu has a large z-index value and the main content has a slightly lower one:
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
As for the fragment thing, it's done using JS. W3Fools has the same thing, done using jQuery. Perhaps you can decipher the script. Looks like it hooks to the scroll event of the document, checking if the position if the element is above the position of the viewport, taking action accordingly.
One way is to combine CSS + JavaScript let's say (jQuery)
CSS:
position:fixed for the top panel.
Use jQuery offset to detect container position and after you can can apply CSS classes for the "highlights navbar".
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
I have a HTML page which a pretty complex layout (see here). I need to put an image on that page which the visitor can drag anywhere so she can remember where she was. I've implemented the bookmark feature but now I need to place the image somewhere where she can easily grab it.
Basically, I'd like the element to stay below the ToC on the right but it shouldn't scroll out of view.
I guess I could use JavaScript to move the element as soon as it starts to scroll out of view but is there a better option? Can I say "float right and below the ToC div or view.top, whichever is greater"?
Or maybe I should create a fixed header (with the links and the maybe the ToC)?
Any other ideas?
It can probably be done using JQuery, but will always be jittery. I would consider a fixed DIV. Of course you could position that below the menu so it will never be higher (= closer towards the top edge) than the menu, and will maintain its position.
.thingy { position: fixed; right: 0px; top: 415px; width: 256px }
That would necessitate that there is nothing else below the menu, otherwise the bookmark icon will overlap other things.
If you just want the image to be fixed, but still scrollable to the top of the window, then you'll need to handle the window's scroll event, and set the image's position to fixed when the image is scrolled to the top.
For an example of this, see the site navigation on QuirksMode.
Alternatively, you could give the entire TOC position: fixed; right: 0;, give the toc a width, and give the teaser a right-margin equal to the TOC's width. There would be no JavaScript requirement this way, and you'd have the entire TOC always visible.