I have two fixed elements, one of which can either have
display: block or display: none. The other fixed element is always going to be visible. I want the elements to stick to the top of the website, while having them not overlay each other.
The only proposed solution I found is in these questions:
How to position a fixed div under another fixed div?
Fixed element below fixed element without JS
Put your two divs inside another container div and set that one as
fixed.
I can't do that however, as both of these elements are on different positions in the code, which I am not able to change.
Here's a code snippet demonstrating my problem:
nav,
.secondmenu {
position: fixed;
height: 120px;
opacity: 1;
top: 0;
width: 100%;
background: lightgrey;
}
.secondmenu {
height: 50px;
background: grey;
opacity: 1;
z-index: 2;
}
body {
height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>
What I want and things to keep in mind:
If both elements are visible, they should be fixed on top of the page, while one is below the other
If only the second element is visible, I want the second one to be fixed at the top of the page
The first element can change its visibility using inline styles (display:none <-> display:block, even without reloading the website)
Javascript/Jquery solutions are fine
this could bo done adding a 'top' with the height of the first nav to the second, like i did here.
Note: This is not the complete solution: If you want to show the second nav only you could do this using js by setting the 'top' back to 0.
nav,
.secondmenu {
position: fixed;
height: 120px;
opacity: 1;
top: 0;
width: 100%;
background: lightgrey;
}
.secondmenu {
height: 50px;
background: grey;
opacity: 1;
z-index: 2;
top: 120px;
}
body {
height: 1000px;
}
<div class="secondmenu">Might be there or not and overlays the other navigation</div>
<div>Some other stuff separating the two from each other with relative position</div>
<nav></nav>
Creating a holder for both of them is the proper approach.
But in your case you can position both of them fixed.
and when the other one is hidden or shown you can handled both elements style(i.e. top and left properties) via Javascript
Try like below
Have you tried Sticky Kit? http://leafo.net/sticky-kit/
Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
Related
I need a box that slides up from the bottom of my page. I will use the box to show important information to new users. So for example, immediately after signup, the box will slide up with a welcome message.
I've made this jsfiddle that to some extend exemplifies the desired behaviour. It's just a div that gets slided up from the bottom:
$('.foot').addClass('slide-up', 500, 'easeOutBounce');
However, the code is only to exemplify, because the implementation is insufficient for the following reasons:
The bottom box has a pre-determined 500px height, because it's initially hidden 500px below the browser. Instead, I need just the box height to fit its content. The content will vary, and will even be changed through javascript once loaded.
The bottom box emerges on top of other elements. Instead, I want to split the screen in 2. A bottom half that has as much height as the box content needs. And a top half that behaves just like a regular web page, i.e. if there is too much content the user can just scroll down. To exemplify the described effect you can check this jsfiddle (the code has no relevance though)
How could achieve the described behaviour?
After experimenting with several methods, I ended up with a solution that combines some ideas given in freedomm-n's comments (modify the size of the main div) and in Nikhil's answer (use a flex container). You can see the result in this jsfiddle.
For the following markup:
<div id="divContainer">
<div id="divTop">
Main content
</div>
<div id="divFooter">
Footer content
</div>
</div>
And these styles:
html, body, form
{
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#divContainer
{
width: 100%;
height: 100%;
}
#divTop
{
overflow-y: auto;
padding: 8px;
height: calc(100vh - 16px); /* Accounts for padding and border (if any) */
}
#divFooter
{
padding: 12px;
text-align: center;
border: 1px solid black;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.containerEnd
{
display: flex;
flex-direction: column;
}
.topEnd
{
height: auto;
flex-grow: 1;
}
This Javascript code is used to animate the div elements:
function slideUpFooter() {
var currentHeight = $('#divTop').height();
var footerHeight = $('#divFooter').outerHeight(true);
$('#divTop').animate(
{ height: currentHeight - footerHeight },
2000,
'easeOutBounce',
function () {
$('#divContainer').addClass('containerEnd');
$('#divTop').addClass('topEnd');
});
};
The function called at the end of the animation sets the flexbox parameters, to ensure that the footer sticks to the bottom of the page.
I have updated your Fiddle. Look below for details.
You don't need to use position: fixed for the .foot section, you could use position: relative instead. Since I noticed you were using flex, I took the liberty to fix this using the same.
Changes made
Firstly I suggest adding a div container, giving a class name say - container.
Make the container display: flex & change the default direction to flex-direction: column.
Now since you want the main-content to be scroll-able depending on its contents, you need to first set a height to this section with height: 200px; and then make it scroll-able using overflow-y: auto;
Let me know if you have any doubts.
Im trying to get this scrolling effect i have seen on the website http://www.unheap.com , if you scroll to the bottom or to the right you'll notice that you can't scroll past whatsoever. Most website including this one allow you to scroll past slightly with a lot of resistance but I'm trying to replicate the example above where you can't scroll past at all. Anyone know of any plugins or methods on how to go about creating this effect?
The actual website itself is 100% the width and height of the page and any scrolling that occurs is accomplished via an absolutely positioned container with overflow: scroll.
EDIT
The actual overflow is set on the .grid element, which is inside the absolutely positioned .container element.
EDIT #2
The author is also using jScrollPane, but you can prevent the bouncing effect simply by making your body 100% width and height and absolutely positioning a container that has overflow set to scroll.
EDIT #3
See the attached code snippet - (you may have to copy and paste it into it's own HTML file because of the way SO displays snippets). There is no bouncing.
* { margin:0; padding:0; }
html,
body { width: 100%; height: 100%; overflow:hidden;}
body>div { height: 50vh; overflow: auto; padding: 10px; background: #000; position: absolute; width: 100px; top: 100px; left: 100px;}
body>div>div { height: 1000px; background: #0f0;}
<div>
<div>scrollable content</div>
</div>
Here is a fiddle to demonstrate the problem:
http://jsfiddle.net/6e1vg58L/
The javascript adds the "position:fixed" to the nav-content. Everything works how I want, the nav content stays in place while scrolling down the page. Now, if you go and put "position: fixed" under "#nav-content" in the CSS, and delete the JS, it should have the same outcome, correct?
For some reason setting the position in CSS or HTML causes the entire cell to dissapear, while setting it using Javascript or any browser inspector gives it the desired output?
$(document).on("scroll", function(){
if($(window).scrollTop() > 0)
{
$("#nav-content").css("position","fixed");
}
else
{
$("#nav-content").css("position","relative");
$("#nav-content").css("top",0);
}
});
vs
#nav-content {
position: fixed;
}
At first I thought it could be something with the listener causing it to work (but why?), but after opening it up in a live browser and adding the "position: fixed" through the inspector, it works exactly how it should. This is the problem, two out of four ways give the same, desired result, but the other two give the same, undesired result.
Although I am not 100% on the exact whys I think the reason is because by declaring it fixed has the following effect.
fixed
Do not leave space for the element. Instead, position it at a
specified position
so it means content being 100% is allowed to take the whole screen when the page is first rendered. Navigation (although not the one being fixed which is the confusing bit) is on the screen but hidden by the content at 100%. the interesting thing is if you use chrome to disable the fixed property the navigation appears and then because it is now on screen reapplying the position fixed does not hide it which is why the JS route behaves differently.
the changes to fix could defining the initial widths in % relative to each other.
#content {
position: relative;
background-color: #eee;
width: 70%;
max-width: 1300px;
min-width: 450px;
height: auto;
}
and then the same for navigation
#navigation {
width: 30%;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/vemtyyox/
another way to keep the navigation at 300px could be to use calc to define the width of the content
#content {
position: relative;
background-color: #eee;
width: calc(100% - 300px);
max-width: 1300px;
min-width: 450px;
height: auto;
}
#navigation {
width: 300px;
background-color: #000;
height: 100%;
position: relative;
top: 0;
bottom: 0;
}
http://jsfiddle.net/9db77jvp/
Looking closer i think there is something odd about the way display:table-cell and the fixed properties are working, maybe.
I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.
I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.
So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!
As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work
Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.
Demo
Not much HTML ...
<div></div>
<div>Reveal Me</div>
CSS
/* These are for your main site wrapper */
div:first-child {
height: 800px; /* Even auto is fine, I
used fixed height because I don't have any content here */
background: #eee;
margin-bottom: 200px; /* Equals footer wrappers height */
z-index: 1;
position: relative;
}
/* These are for footer wrapper */
div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
For Dynamic Sizes
Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using
$('#wrapperElement').css('margin-bottom', $('#footer').height());
Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.
Something about fixed element - Horizontal Centering (I think it will be helpful to some users)
When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...
Demo 2
HTML
<div></div>
<div>
<div>Reveal Me</div>
</div>
CSS
body > div:first-child {
height: 800px;
background: #eee;
margin-bottom: 200px;
z-index: 1;
position: relative;
}
body > div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
body > div:last-child div {
width: 80%;
margin: auto;
outline: 1px solid red; /* To show that element is horizontally centered */
}
Note: Selectors used in this answer are too general and are good for
quick demonstration purposes, in real projects, make sure you use
specific selectors
I have a slew of normal inline <a> links that I want to open up small "floating" objects on click. These objects would be simple HTML divs (with some CSS) that would load on top of the page and below the link. I don't want to use relative positioning which would push the page around and I can't think of a way to use absolute positioning to get the divs underneath the inline links. I currently envision toggling the display value of the objects from none to whatever and back. I'm open to ideas.
Thanks!
Mike
You may use absolute positioning with the parent set to relative. e.g.
<div id="container">
<a href=...>hover me for floating!</a>
<div class="floating">
...
</div>
</div>
In CSS,
#container { position: relative; ... }
.floating { position: absolute; top: 20px; left: 20px; }
In the above example, the .floating div is absolute positioned, which means it is taken away from the normal flow (ie, no placeholding it). But it also relative reference to it's parent, which is the div#container in this case, so that, if you set the top and left position, it is actually calculated from the top-left corner of div#container rather than to the document body.
you can use "fixed" position:
<div style="position: fixed; left:100px; top:100px; background-color: white; height: 200px; width: 200px;"> ... </div>
"fixed position" --> Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties
I'd suggest:
<style="text/css">
a {
display: inline;
position: relative;
}
a span.pop_up_floaty_thing {
position: absolute;
top: 1em;
left: 0;
display: block;
width: 10em; /* or whatever */
}
</style>
Link text<span class="pop_up_floaty_thing">The pop up, floaty thing text</span>