I read the post here on sticky headers and have the following Angular layout
<div fxLayout="column">
<div class="sticky">
<app-header></app-header>
<app-navbar></app-navbar>
</div>
<div fxLayout="row" fxFlex="100">
<div class="my-content">
<router-outlet></router-outlet>
</div>
</div>
</div>
I added the sticky css to have the header and navbar stay at the top even when scrolling and that works
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
overflow: hidden;
}
But when I scroll and the main content is moving up. The content does not disappear into the header, I can still see the labels, textboxes, and grid.
I added my-content and added the overflow but it still not working.
.my-content {
padding: 0 15px;
width: 100%;
overflow: hidden !important;
}
I been go over this post many times and don't see how the content hides under the banner
https://stackblitz.com/edit/angular-9-0-0-rc-1-ccgxry?file=src%2Fstyles.scss
Any help is appreciated. Thanks
finally figure out the answer, add z-index
.header-sticky {
width: 100%;
position: fixed;
top: 0;
z-index: 10;
background:inherit;
}
.my-content {
padding: 0 15px;
width: 100%;
z-index:5;
overflow: hidden !important;
}
Related
I need to create the illusion that an article's content is sliding underneath it's title when scrolling the page. The HTML looks like this:
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="body">
<p>a lot of content</p>
</div>
</div>
CSS looks like this at this point:
.wrapper{
height: 100vh;
width: 50%;
margin-left: 25%;
margin-top: 100px;
position: relative;
}
.header{
padding: 20px;
background-color: #fff;
position: fixed;
display: block;
box-sizing: border-box;
width: calc(50% - 8px);
z-index: 2;
}
.body{
z-index: 1;
top: 120px;
position: absolute;
padding: 20px;
background-color: #fff;
}
https://jsfiddle.net/joris508/frad472j/
Because there's an image in the background of the real website, I can't just put an element with a higher z-index to the top to hide that part.
I also tried to make the content portion (.body) scrollable itself. That created the right effect visually, but because the background-image on the page has a parallax scroll effect, scrolling the div itself caused problems.
Is there any solution to this problem?
so I'm trying to tame the Footer so that it stays below the dynamic content container, but whatever way I try it (Pos: Abs, Bottom: 0; etc etc) it either appears halfway up the content or fixed at the bottom. Either I don't want. It would be appreciated if someone could shine a light on my problem.
HTML:
<div id="Content">
<div id="G6"></div>
<div id="Post-Block">
<div id="block">
<div id="feat-img"></div>
<div id="date"></div>
</div>
</div>
<div id="Footer">
<div id="G7"></div>
<div id="FooterBreak"></div>
<div id="FooterBG"></div>
<div id="FooterLinks">
</div>
<div id="Copyright">
</div>
<div id="Copyright2">
</div>
<div id="FooterBreak2"></div>
</div>
</div>
CSS:
#Footer {
width: 100%;
height: 230px;
position: absolute;
left: 0;
bottom: 0;
}
#Content {
z-index: 7;
background: url(/images/content%20bg.jpg) repeat left top;
position: absolute;
top: 336px;
width: 999px;
height: auto;
color: #fff;
min-height: 950px;
margin: 0 0 230px;
}
html {
position: relative;
height: auto !important;
}
body {
z-index: 0;
background: url(/images/background-texture%20d.jpg);
left: 0;
}
#page {
z-index: 1;
width: 1000px;
height: 1000px;
margin-left: auto;
margin-right: auto;
}
EDIT: When I used the Chrome dev tools to inspect the Crow's Perch website, it looks like your problem is that the height of your HTML is smaller than your content (ie, you use negative bottom values in your absolute positioning for some of your content). Given this, you could add bottom: -865 to #footer, but given that you said your content is dynamic, that's an EXTREMELY brittle solution. Unfortunately, since you're pixel-pushing all of your elements, I don't think there's a way to have your footer respond dynamically to your changing content. More comprehensive refactoring of your code is likely necessary.
Good luck!
I have a site that has a top navigation bar, a header, a sidebar and a content body next to the sidebar. The header, sidebar, and content body are positioned absolutely so that they don't move when you navigate to other pages that are using the same template. The sidebar and content body have scroll bars. The header and sidebar are always visible even with scrolling. This works great as shown in the demo. But suppose the top navigation changes height. Then the vertical alignment is off. Since this site is using a global top navigation that's used in other sites as well, the top navigation can change at any moment. When it does change, this layout will not be future proof. Is there a way to make this future proof?
What I have currently:
http://codepen.io/codingninja/pen/nKwox
body {
margin: 0;
padding: 0;
}
.content {
/*position: relative;*/
}
.top-nav {
background: #000;
height: 42px;
color: #fff;
}
.header{
position: absolute;
height: 100px;
width: 100%;
background: #ddd;
}
.sidebar {
position: absolute;
top: 142px;
left: 0;
bottom: 0;
background: #aaa;
overflow-y: auto;
overflow-x: hidden;
width: 100px;
}
.body {
position: absolute;
top: 142px;
right: 0;
left: 150px;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
What happens when the top nav changes height:
http://codepen.io/codingninja/pen/nICzK
.top-nav {
background: #000;
height: 100px;
color: #fff;
}
Do you mean this:
Css3 has a Calc() Function
Height: Calc( 100% - 100px )
Instead of absolutely positioning everything you can make use of display:table to achieve the layout you want. Using the following html
<div class="table">
<div id="top-nav" class="row">
<div class="cell">top-nav</div>
</div>
<div id="header" class="row">
<div class="cell">header</div>
</div>
<div id="content" class="row">
<div class="cell">
<div class="table">
<div id="side-bar" class="cell">
<div class="overflow">
sidebar
</div>
</div>
<div id="body-content" class="cell">
<div class="overflow">body-content</div>
</div>
</div>
</div>
</div>
</div>
And Css
html,
body,
.table {height:100%; padding:0; margin:0;}
.table {display:table; width:100%;}
.table .row {display:table-row;}
.table .cell {display:table-cell;}
#top-nav {height:42px;}
#header {height:100px;}
#content {height:100%;}
#side-bar {width:100px;}
.overflow {height:100%; overflow:auto;}
Example
You will notice that when your top nav grows, your main content area will shrink. You will also not get into a positioning / z-index nightmare
I found a solution that involves a line of javascript to set top to the calculated height based on the height of the top nav and the header.
$(".sidebar, .body").css('top', topnavheight+100);
I feel like this should be an easy answer but cant figure out how to achieve this effect.
Essentially i'm trying to do this: http://demo.smooththemes.com/theone/
one this site, when you start scrolling the image stays fixed and the content scrolls over top. Any ideas?
Thanks for you help.
example
http://jsfiddle.net/gvMLS/
HTML
<div id="header">
</div>
<div id="content">
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
CSS
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #ff0000;
}
#content {
position: absolute;
top: 20px;
bottom: 20px;
width: 100%;
background-color:#fff;
overflow: auto;
}
I am trying to make a sticky footer, and my page's html structure is like this: (vastly simplified)
<head>...</head>
<body>
<div class="centerPane">
<div class="userCenter">..</div>
<div class="bottom>...</div>
</div>
</body>
css:
head
{
height: 100%;
}
body
{
min-height: 100%;
height: 100%;
}
.userCenter
{
position:relative;
height: 100%;
}
.bottom
{
position: absolute;
bottom: 20px;
height: 30px;
}
For some reason, this is pushing the bottom OFF BEYOND the bottom of the page regardless of the browser window size on firefox 10.0.1.
Here is a demo: 173.228.119.111:3000/users/sign_in
not quite sure what the problem is, but I would take a look at this http://www.cssstickyfooter.com/using-sticky-footer-code.html you seem to be missing some css...
You could try setting the margin on the footer to a negative value i.e.:
margin: -4em;