I have created an angular component called toolbar and applied the following CSS to it.
position: fixed;
z-index: 999;
height: 100px;
I used position to fix my toolbar to the page whenever I scroll the page. I used z-index to display the toolbar over all other elements on the page.
This makes up for an individual element that I used in the app.component.html.
My problem is, when creating a page using a new component, if I navigate to said page, the 'newcomponent works!' does not show up because the toolbar overlaps it.
I wish to make my toolbar fixed in a way that if I had any new element, whatever element I display, it appears right under the toolbar instead of underneath it.
Thanks for your help!
What could help you is position: sticky; which is exactly what you're asking for.
Here is an example (you need to specify the position, for example top: 0 for position: sticky to take effect):
body, html {
margin: 0;
padding: 0;
}
.toolbar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 999;
height: 100px;
width: 100%;
background: red;
opacity: 0.5;
}
.contents {
height: 5000px;
}
<div class="toolbar">xyz</div>
<div class="contents">
<div>contents</div>
</div>
Related
<div class="shouldBeOverlapped">
content
</div>
now I want to add another div on it (e.g. waiting) so it will 100% cover it and make it unclickable, preferably transparented. How to do it?
Try to search for "overlay". This will be the right thing.
Example here:
#overlay {
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
<div class="shouldBeOverlapped">
content
</div>
<div id="overlay"></div>
You can try to put that waiting div as a :before. Although it is limited, it can be easy to set up.
#textToHide {
background: yellow;
position: relative;
width: 300px;
padding: 10px;
}
#textToHide:before {
content: '';
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div id="textToHide">
This text is protected against selection... although we could still look for it in the source code...
</div>
You need a containing div element with it's position attribute set to relative. This defines the bounds of the overlay. Without it the overlay will look up the DOM until it finds a parent it can get it's positioning information from. If it doesn't find one, it will cover the entire page body.
I've created a JSFiddle for you here: https://jsfiddle.net/aogd164t/
Try removing position: relative from the container class and see the result.
I've a full page fixed element to show 'This page is loading' gif image. But the page has contents which overflows the body. And user can scroll it over this fixed element. Is there a CSS way I can prevent this? I could have catch the event and stop it through JS. But a clean CSS way would be great.
.page-loading {
background: rgba($white, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: all 0.5s;
z-index: 14;
&__image {
height: 50px;
width: 50px;
}
}
I've refered this. But I want to control it from the component itself.(without JS)
As in the link you already provided, you have to apply overflow:hidden; to your body.
I'm using bootstrap's navbar-fixed-bottom to have a sticky navbar at the bottom. This works great. The problem I have is when I use Backbone.Marionette to dynamically add content the navbar no longer sticks to the bottom - rather it just stays in the same spot, hiding some content and eventually the content just goes below it as I add more.
Is there a way to force the navbar to stay stuck to the bottom regardless of how much content is added?
Or simply...
.navbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* the rest of the styling */
}
A lot neater and easier I find. And doesn't matter how tall your navbar is. You can add heights and colours and whatever styling you want after it.
This is an old trick without Bootstrap. Supposed you know the height of the navbar. You can try this: http://jsfiddle.net/e85xw/
.navbar{
height: 2em;
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
margin-top: -2em;
}
If you don't know the height of the navbar, you can use JS for a little help
http://jsfiddle.net/2T282/
<style>
.navbar{
height: 2em;//in case this number is dynamic
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
}
</style>
<script>
$(document).ready(function(){
$('.navbar').css('margin-top',$('.navbar').height() * -1);
});
</script>
I'm trying to reveal a page from a specific point in this case the (div:content) further down the page.
Desired effect will have the red block at the top, however scrolling down will reveal the blue block above
UPDATED: http://jsfiddle.net/cr8uj/1/
HTML
<div class="block">
block
</div>
<div class="content">
content
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
You are looking for: scrollTop
http://api.jquery.com/scrollTop/
Set the current vertical position of the scroll bar for each of the
set of matched elements.
Example:
$('body').scrollTo('#YourDiv');
There is a question related to this: jQuery scroll to element
A good library: http://mmenu.frebsite.nl/examples/responsive/index.html
Other options:
What you need is the JavaScript window.scrollTo method
window.scrollTo(xpos,ypos)
Insert the div position in there.
Or use the JQuery method ScrollTo, see an example here
$(...).scrollTo( 'div:eq(YourDiv)', 800 );
I have the following layout:
On the left side I have a menu and big gray part on the right side is the body content. The problem is on the left menu I have a bunch of buttons. I want this menu to be fixed position and body scrollable. I Have the following css:
#menu {
position: fixed;
}
#content {
position: inherit;
margin-left:300px;
}
The problem is that on the red part of my menu all button unavailable, I can't click on it. looks like body overrides the menu.
Any ideas what the problem might be?
Thanks
Including the html would give a better sense of the stacking order and likely yield a better answer. Given what you've provided, this should fix:
#menu {
position: fixed;
z-index: 1;
}
In order to fix it to the top and not scroll, you don't use position: fixed;. You need to use position: absolute;. If you don't want it at the very top, then you use position: relative; and place it inside an element.
Then, in order to scroll, you use position: fixed;.
When you use position: fixed, it places the element fixed within the visible page.
However, when you use position: absolute, what this does is put it on an absolute position on the page regardless of scroll. For example, if you added the css top:0; then it would be 0 pixes from the absolute top of page, and if you scroll down it will disappear from view because it is all the way at the top of the actual page, not just the top of the visible page.
I understand it seems a bit counter-intuitive to you. However, you can see it working in the jsbin below.
Working jsbin:
http://jsbin.com/Uwuyuha/1
page.html
<body>
<div id="container">
<div id="menu">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<div id="content">
</div>
</div>
</body>
style.css
body {
width: 100%;
height: 100%;
}
#container {
width: 1000px;
height: 1000px;
}
#menu {
width: 250px;
height: 2000px;
position: fixed;
background: #999;
}
#content {
width: 650px;
height: 300px;
position: absolute;
margin-left: 251px;
background: #444;
}