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".
Related
I'm trying to write myself a little Stylish style for one page, for easier reading.
The page in question is https://satisfactory.fandom.com/wiki/Hard_Drive.
What I want to achieve is to the top row of this table (with "alternate name", "product" and so on)
to behave similar to the top wikia navbar - I want it to be on it's place, until it's been scrolled past down, then to stay at the top - sort of as freezing a row in a spreadsheet.
The position: sticky; should do what I want, but nothing changes. I've tried with background-color to see if I'm targeting the proper element, and the background color changed.
Here's how I'm trying to do it
table#alternateRecipesTable th {
position:sticky!important;
top: 0px!important;
}
I'm using firefox 100 with stylus 1.5.21.
Thank you.
Your plan to set the position: sticky CSS property is correct. However, to work this as expected, there can't be a parent element with overflow: hidden.
If you set the position: sticky to your head cells of the table, you also need to check every parent element and unset the overflow: hidden property, otherwise it will not work.
so i have bootstrap based site with fixed navigation bar (that follow you around the page at the top) and when i want to show modal popup, it appear behind those navigation bar, how to fix?
and i using margo template from graygrids
it also appear in summernote modals for uploading picture, so it looks like all modal will appear behind those navigation bar.
To solve the problem I included in the CSS a super high z-index value (1000000) for the modal-backdrop (the shadow behind the modal), and a little bit higher one (1000001) for the modal:
.modal-backdrop {
z-index: 100000 !important;
}
.modal {
z-index: 100001 !important;
}
Hope it helps!
The navbar is fixed, meaning z-index is only relative to it's children. The simple fix is to simply increase the top margin on the outer modal container to push it down the page slightly and out from behind the navbar.
Otherwise, your modal markup has to sit in your header and you need to give it a higher z-index than the z-index of the parent navbar.
This is too late to post the answer, however I've had a similar problem today with Modal popup and a navbar.
Used javascript to set z-index of the navbar to zero when the popup is displayed and vice versa.
Note: use whateverElement.style.zIndex = 0 instead of whateverElement.style.z-index = 0 as javascript handles - as subtraction operator.
I ran into this today and came up with an alternate solution that doesn't involve modifying the CSS. If you are using MVC, you can use a section tag and render the modal in the layout (anywhere in the body). This causes the default modal behavior to work and no longer hides it behind the nav bar.
On _layout.cshtml (inside the body tag):
<body>
<!--... OTHER Layout/header code...-->
#RenderSection("modals", required: false)
</body>
and in your view:
#section modals{
#Html.Partial("_MyModal")
}
Something similar would work in other languages and most importantly doesn't require modifying the CSS.
You need to adjust the z-index in your CSS. The z-index for your navigation is higher number than everything else. So to adjust it you need to add a z-index that is higher for your modal popup. the code would look like
For example z-index: 3;
To be able to do this you have to set a position to your popup.
For example position: absolute;
After setting the position you can also adjust the position even more with putting this code in to your CSS
top: 500px; left:500px;
This means that the container you put a absolute position on is moved 500 pixels from the top and 500 pixels from the left.
If you cannot understand what z-index is. I will provide a picture for you.
z-index axis example
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.
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.
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.