We Keep Coding

How to apply css on a div which is in some container but shown with respect to screen

I created my custom modal with position: fixed and use this modal into content but it's not applied with respect to screen its shows position: fixed with respect to content How can I make modal in the center with respect to screen center?
modal is imported into the content.
where nav position is fixed
sidebar position is fixed
content position is relative
and modal position is already fixed but this fixed position of modal take w.r.t its parent not with body
Problem: Modal takes the fixed position with respect to its parent but I need to apply modal with respect to HTML body tag. Is there any way to apply this?
Can't put modal directly to body because it's created in such a way that where it'll put, it'll automatically used to draw w.r.to body
Also use parent selector
.overlay{
animation: ${fadeIn} 200ms ease-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: ${(props) => props.theme.palette.greyScale[9]};
}
body < parent(body) {
position:relative;
}
does not work.
Here is the structure:

I think the layout is not correct. I suggest the following layout and style.
Put everything inside a container. I have created a jsfiddle with sample layout. Please have a look. Let me know if any queries
.container {
background: lightgray;
width: 100vw;
height: 100vh;
float: left;
display: block;
position: relative;
}
.nav-bar {
widows: 100%;
height:20%;
background: gray;
}
.side-bar {
width:20%;
height: calc(100% - 20%);
float: left;
background: lightblue;
}
.content {
width: calc(100% - 20%);
background: red;
float: left;
height: calc(100% - 20%);
}
.modal {
position: fixed;
width: 200px;
height: 150px;
background: green;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
<div class="container">
<div class="nav-bar">
NavBar
</div>
<div class="side-bar">Side Bar</div>
<div class="content">
Content
<div class="modal">
Modal
</div>
</div>
</div>

collapsible sidebar.....want to fix the header and footer part of sidebar

On my web page sidebar appears when clicked upon a particular icon.In the sidebar-footer there is a text box whose input runs on a particular php page and output gets printed on sidebar-main. I want to fix the sidebar-header and sidebar-footer relative to sidebar (i.e., when sidebar is active).Only sidebar-main should scroll when content grows. As of now whole sidebar scrolls. Thank you in advance!
#bot {
position: fixed;
bottom: 50;
left: 10;
cursor: pointer;
}
.overlay {
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
display: none;
/* middle layer, i.e. appears below the sidebar */
z-index: 9998;
}
#sidebar {
width: 350px;
position: fixed;
top: 0;
left: -350px;
height: 100vh;
z-index: 999;
background: linear-gradient(to left, #26a0da, #314755);
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
position: absolute;
top: 10;
right: 20;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.glyphicon.glyphicon-remove {
font-size: 20px;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
display: none;
}
#sidebar .sidebar-header {
width: 350px;
padding: 20px;
top: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
position: absolute;
}
#sidebar .sidebar-menu {
width: 350px;
padding: 20px;
text-align: center;
#position: fixed;
}
#sidebar .sidebar-footer {
width: 350px;
padding: 20px;
bottom: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
#position: fixed;
<div class="wrapper">
<nav id="sidebar">
<!-- Close Sidebar Button -->
<div id="dismiss">
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Sidebar-Header</h3>
</div>
<!-- Sidebar Main -->
<div class="sidebar-main">
<div id="result"></div>
<!-- Result comes from javascript part -->
</div>
<!-- Sidebar Footer -->
<div class="sidebar-footer">
<div id="message-box" class="col-md-5 col-md-offset-3">
<input type="text" id="message" name="message" value="" placeholder="Messages" />
</div>
</div>
</nav>
<div id="sidebarCollapse">
<img src="icon2.png" id="bot">
</div>
<div class="overlay"></div>
</div>

You may need to simplify your code to avoid including elements that are not part of the question (like the sidebar's "active" class), as your snippet doesn't actually show anything. Also using a relative path for an image on a snippet doesn't really work.
On the other hand, it is not clear if your sidebar's header and footer are meant to be fixed height or not (or the whole sidebar). In the first case, it can be handled with CSS alone as seen in this snippet.
You may want to add a container for your menu and set a fixed height for that container (screen size - header height - footer height).
HTML
<nav id="sidebar">
<div class="sidebar-header">
<!-- Header content -->
</div>
<div class="sidebar-menu">
<div class="menu-container">
<!-- Menu content -->
</div>
</div>
<div class="sidebar-footer">
<!-- Footer content -->
</div>
</nav>
CSS
#sidebar {
width:350px;
position:fixed;
left:0;
top:0;
height:100vh;
}
.sidebar-header {
height:100px;
position:relative; /* doesn't need to be absolute */
width:100%
}
.sidebar-footer {
height:100px;
position:absolute; /* the footer goes to the bottom */
bottom:0;
left:0;
width:100%
}
.menu-container {
height: calc(100vh - 200px); /* screen height - header height - footer height */
overflow: auto; /* this makes your container div to scroll if the content's overflowing */
}
If you want automatic heights for the footer or header of the sidebar (which I don't recommend), then you should set the sidebar's header and footer height from javascript and then calculate the menu container's height and set it from code.

How to Make a Fixed Element Stay Relative to the Current Top Scroll Position?

Original Question:
I have a function which opens an overlaying, fixed-positioned element when prompted, and I am trying to figure out how to be able to open this at the current top position, instead of jumping to the top of the page (top: 0) every time the .no-scroll class is active.
Here is the progress I've made, thus far:
var o = 0;
$("img.click").click(function() {
var s = $("html, body");
o = $(window).scrollTop(), s.css("position", "fixed"), s.css("background-position", "0 -" + o + "px");
var i = $(this).attr("src");
s.find("#img-open").attr("src", i), s.addClass("no-scroll"), $("#img-view").addClass("target");
});
And I've additionally applied a .no-scroll class to the html, and body tags:
html {
height: initial;
}
body {
height: auto;
}
body.no-scroll,
html.no-scroll {
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
Update (Applied Answer to Snippet + Additional Notes):
Thanks to this answer, I was able to adjust a few additional things:
No need for a no-scroll class on the html tag. Therefore, it was removed.
I added preventDefault() to the touchmove touch event, which keeps the body background content from scrolling on mobile browsers like iOS Safari, (as of 2018).
$(document).ready(function() {
$("a.lbimg > img.lb-click").click(function() {
$("#lb-view").addClass("target");
var o = document.documentElement.scrollTop || document.body.scrollTop;
$('body').addClass('no-scroll');
document.documentElement.scrollTop = document.body.scrollTop = o;
$('body').bind('touchmove', function(e) {
e.preventDefault();
});
});
$(".lbimg-wrap, #lb-controls").on("click", function(s) {
$("#lb-view").removeClass("target");
$('body').removeClass('no-scroll');
$('body').unbind('touchmove');
});
});
body {
height: auto;
}
body,
html {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: #808080;
margin: 0;
padding: 0;
border: 0;
}
body.no-scroll {
overflow: hidden;
}
p.content {
color: white;
}
img {
padding: 5px;
border: 1px solid;
box-sizing: border-box;
z-index: 1;
}
.img-wrap {
display: block;
}
.img-wrap img {
line-height: 0;
display: block;
}
a.lbimg {
cursor: pointer;
display: block;
line-height: 0;
}
a.lbimg img {
margin: 0 auto;
padding: 0;
border: 0;
}
.lb-click {
width: 25%;
height: auto;
}
.customlightbox {
top: 0;
bottom: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
z-index: -1;
}
.lbimg-wrap {
width: 100%;
height: 100%;
padding: 47px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
border-color: white;
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#lb-controls {
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
border-left: 1px solid;
border-bottom: 1px solid;
border-color: white;
z-index: 3;
}
#lb-close {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#lb-close:before,
#lb-close:after {
content: '';
display: block;
position: absolute;
background: white;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#lb-close:before {
width: 2px;
height: 0;
top: 0;
left: 14px;
}
#lb-close:after {
width: 0;
height: 2px;
top: 14px;
left: 0;
}
.customlightbox.target {
display: inline-block;
z-index: 2;
}
.customlightbox.target,
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#lb-controls {
top: -3px;
}
.customlightbox.target~#lb-controls #lb-close:after {
width: 30px;
}
.customlightbox.target~#lb-controls #lb-close:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="content">
Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll.
</p>
<div class="img-wrap">
<a class="lbimg">
<img class="lb-click" src="https://78.media.tumblr.com/8b1b8cbb2b963ab64eb2341f608638bf/tumblr_p4wbo7ZLJS1qccr26o1_1280.jpg">
</a>
<div class="customlightbox lb-animate" id="lb-view">
<div class="lbimg-wrap">
<img class="lb-animate" id="lbimg-open" src="https://78.media.tumblr.com/8b1b8cbb2b963ab64eb2341f608638bf/tumblr_p4wbo7ZLJS1qccr26o1_1280.jpg">
</div>
</div>
<div id="lb-controls" class="lb-animate">
<a id="lb-close" class="lb-animate"></a>
</div>
</div>
<p class="content">
Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll.
</p>
</body>

You were almost there:
$(document).ready(function() {
$("a.lbimg > img.lb-click").click(function() {
$("#lb-view").addClass("target");
var o = document.documentElement.scrollTop || document.body.scrollTop;
$('html, body').addClass('no-scroll');
document.documentElement.scrollTop = document.body.scrollTop = o;
});
$(".lbimg-wrap, #lb-controls").on("click", function(s) {
$("#lb-view").removeClass("target");
$('html, body').removeClass('no-scroll');
});
});
html {
height: initial;
}
body {
height: auto;
}
body,
html {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: #808080;
margin: 0;
padding: 0;
border: 0;
}
body.no-scroll,
html.no-scroll {
overflow: hidden;
}
p.content {
color: white;
}
img {
padding: 5px;
border: 1px solid;
box-sizing: border-box;
z-index: 1;
}
.img-wrap {
display: block;
}
.img-wrap img {
line-height: 0;
display: block;
}
a.lbimg {
cursor: pointer;
display: block;
line-height: 0;
}
a.lbimg img {
margin: 0 auto;
padding: 0;
border: 0;
}
.lb-click {
width: 25%;
height: auto;
}
.customlightbox {
top: 0;
bottom: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
z-index: -1;
}
.lbimg-wrap {
width: 100%;
height: 100%;
padding: 47px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
border-color: rgba(255, 255, 255, .5);
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#lb-controls {
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
border-left: 1px solid;
border-bottom: 1px solid;
opacity: .7;
border-color: rgba(255, 255, 255, .7) !important;
z-index: 3;
}
#lb-close {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#lb-close:before,
#lb-close:after {
content: '';
display: block;
position: absolute;
background: white;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#lb-close:before {
width: 2px;
height: 0;
top: 0;
left: 14px;
}
#lb-close:after {
width: 0;
height: 2px;
top: 14px;
left: 0;
}
.customlightbox.target {
opacity: 1;
display: inline-block;
z-index: 2;
}
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#lb-controls {
top: -3px;
}
.customlightbox.target~#lb-controls #lb-close:after {
width: 30px;
}
.customlightbox.target~#lb-controls #lb-close:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="content">
Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll.
</p>
<div class="img-wrap">
<a class="lbimg">
<img class="lb-click" src="https://78.media.tumblr.com/8b1b8cbb2b963ab64eb2341f608638bf/tumblr_p4wbo7ZLJS1qccr26o1_1280.jpg">
</a>
<div class="customlightbox lb-animate" id="lb-view">
<div class="lbimg-wrap">
<img class="lb-animate" id="lbimg-open" src="https://78.media.tumblr.com/8b1b8cbb2b963ab64eb2341f608638bf/tumblr_p4wbo7ZLJS1qccr26o1_1280.jpg">
</div>
</div>
<div id="lb-controls" class="lb-animate">
<a id="lb-close" class="lb-animate"></a>
</div>
</div>
<p class="content">
Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content
to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll.
</p>
</body>

Text collapsing on side menu close

How do I prevent text from collapsing on a side menu closing. Check out the codepen and you will see that the menu items/text collapse on top of each other when the menu is closed. I've tried overflow hidden on the menu items but that did not work. Any ideas?
see codepen: https://codepen.io/zepzia/pen/vpZQxz
<header>
<div class="container-fluid">
<div class="row">
<nav class="navbar bg-faded fixed-top" id="slide-nav">
<div class="nav-wrapper">
<div class="nav-logo">
<span class="navbar-text menu-toggle" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>
<div id="mySidenav" class="sidenav">
×
<br>
<br>
Home
This Is Link One
This Is Link Two
This Is Link Three
This IsLink Three
Link Three
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
/* NAVIGATION */
.menu-toggle {
cursor:pointer;
float:right;
line-height: 60px;
}
.fa-bars {
color: #fff;
font-size: 30px;
}
.nav-wrapper {
width: 83%;
margin: 0 auto;
}
.navbar {
height: 75px;
background-color: gray;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background:rgba(75,156,211,0.9) url('../img/unc_pine_cb.svg') no-repeat;
background-size: 200%;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
overflow: hidden;
}
/* The navigation menu links */
.sidenav a {
padding: 15px 8px 10px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #13284a;
font-weight: 600;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
left: 0;
font-size: 36px;
}
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "400px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
// FADE OUT ON SCROLL DOWN
$(window).scroll(function(){
$(".fade-to-top").css("opacity", 1 - $(window).scrollTop() / 350);
});

One solution is to change the right attribute instead of the width. So instead you would set the start of the sidebar to right: -400px and change it to right: 0px when the button is clicked. Then reverse when you close the menu.
see my codepen here
This way the text will never collapse.

How do I fix position a div inside a statically positioned div?

My question is about placing a div with position: fixed inside of a div with position: static.
I have a few websites where I fix the header to the top of the window. I also have a parallax effect. I used javascript to allow me to add a class to the header so that it shrinks and changes the opacity on scrolling.
Here's the javascript, layout, and CSS:
$(function () {
$("#Page").scroll(function () {
if ($("#Page").scrollTop() > 0)
$("#header").addClass("scrolled");
else
$("#header").removeClass("scrolled");
});
});
<div id="Page">
<div id="pre-header"></div>
<header id="header" class="">
<div class="page-width">
<div class="logo"></div>
<nav class="navigation-bar"> </nav>
</div>
</header>
</div>
#Page {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 100mm;
perspective-origin: top right;
position: static;
}
#header {
padding-top: 34px;
padding-bottom: 34px;
background-color: rgba(255, 255, 255, 0.2);
height: 110px;
position: fixed;
width: 100%;
margin-top: 36px;
z-index: 1;
pointer-events: none;
transition: background .8s;
}
My problem is that I need the header to still float at the top, even after Page has been scrolled.
Thanks for your help.