I have noticed that GIF's are not really compatible in all browsers so instead I have been using movies. Which has been working find until now. I have a website with a background image that is written in css. I had a feeling this would not work but I tried linking the movie like I would a image and it did not even show up. Below is the html and css.
html
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
css
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
From my understanding, linking the video is not going to happen so what would be another option? How would I go about this? I need to text that is there now to still show up and for the movie to be opaque. If I need to make the actual movie itself opaque I can do that. Thanks
Can view website all together here
You could add a video behind the "need a network" part, by using this code:
I replaced the video, and used the JavaScript code to "autoplay" the video!
If you think the video can autoplay without JavaScript, remove it!
I also replaced the iframe tag, with the video tag.
You can replace the video, by changing the src="" attribute on the <source> tag, inside the <video> tag.
function playVideo() {
document.getElementsByClassName('video')[0].play();
}
.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -2;
object-fit: fill;
}
#slider {
/* Removed the background tags, since there are no image placed in the url of the background tag */
/*background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;*/
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
z-index: -1;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<body onload="playVideo()">
<section id="slider">
<video class="video" autoplay="autoplay">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div class="block">
<h1 class="animated fadeInUp">Need a Network?</h1>
<p class="animated fadeInUp">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.</p>
</div>
</div>
</div>
</div>
</section>
</body>
You can check out how to add a video Tutorial
Edit: Edited fiddle
var $vid = $('video','#container');
var $msg = $('#custom-message');
$msg.css({
top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});
video {
position: relative;
z-index: -1;
}
#custom-message {
position: absolute;
color: rgb(230, 200, 200);
z-index: 1;
}
#slider {
background: url("../img/") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 10% 0%;
padding: 200px 0 280px 0;
position: relative;
}
#slider:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #8b86a3, #322e40);
opacity: 0.8;
}
#slider .block {
color: #E3E3E4;
}
#slider .block h1 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
line-height: 60px;
letter-spacing: 10px;
padding-bottom: 45px;
}
#slider .block p {
font-size: 23px;
line-height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" align="center">
<section id="slider">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<div id="container" align="center">
<video width="640" height="320" autoplay>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
</video>
<div id="custom-message">
Need a Network?</div>
<div id="custom-message">Then you are in the right place. We can help Design, Setup, Configure, and Maintain a network that fits your exact needs.
</div>
</div>
</div>
</div>
</div>
</section>
Related
I'm developing a website only using HTML, CSS and Javascript, it is my first web page, and I'm getting a problem of the height on a fixed block. The "Contact us" link must open a box with the contact information in the center of the screen, so I used the fixed position, I wanted the height to work as usual, I mean only the height of it's content, but instead, it is showing 100% height of the screen, thank you, the web page is in Spanish, the link to the web site is:
http://www.bordadosyalgomas.com.ve/
Again, this is my first web page, plus I'm on the navigation bar by the time.
EDIT:
Sorry, first time asking, I didn't provide any code:
div#contacts1{
font-family: "Ubuntu Medium";
padding: 3.5em;
width: 50%;
border: solid 2px;
border-radius: 20px;
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: auto;
}
div#contacts{
width: 100%;
height: 4000px;
background-color: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
div#contacts1 img{
height: 60px;
display: inline-block;
vertical-align: middle;
}
div#contacts1 p{
font-size: 1.3em;
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
padding-left: 1.5em;
}
div#contacts1 p strong{
display: block;
font-size: 0.9em;
margin: 0;
margin-bottom: 0.2em;
padding: 0;
}
div.cparador{
height: 100px;
margin-bottom: -1em;
display: block;
}
div.cparador img{
-webkit-filter: drop-shadow(-2px 2px 4px black);
filter: drop-shadow(-2px 2px 4px black);
margin-left: 3em;
}
div.cparador h1{
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Bordaos y algo mas</title>
<style type="text/css">
#import url("index.css") screen;
</style>
</head>
<body>
<div id="contacts">
</div>
<div id="contacts1">
<div class="cparador">
<h1>Información de contacto:</h1>
</div>
<div class="cparador">
<img src="contacts/phone.png">
<p><strong>Teléfono</strong>
0257-2535145</p>
</div>
<div class="cparador">
<img src="contacts/telegram.png">
<p><strong>Telegram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/instagram.png">
<p><strong>Instagram</strong>
#bordados.ym</p>
</div>
<div class="cparador">
<img src="contacts/mail.png">
<p><strong>Correo Electrónico</strong>
bordados.ym#gmail.com</p>
</div>
<div class="cparador">
<img src="contacts/whats.png">
<p><strong>Whatsapp</strong>
0414-5214041</p>
</div>
</div>
</body>
</html>
A picture of the problem
You need to remove bottom:0; - this combined with top:0; causes the div to take 100% height.
Then you can set:
top: 50%; // move popup down by 50% of window height
transform: translateY(-50%); // move it back by 50% of popup height
EDIT:
also consider adding max-height: 100%; to make use of overflow: auto; when height of the window is shorter than popup's height.
There is a simple example of a Modal You can use, and instead of any extraa Custom CSS(Specially Height-Width) leave that simple.
that auto height according to your contents!
link- https://getbootstrap.com/docs/4.0/components/modal/
There is a gap between my background image and I wish to close that gap. How would I go around doing that?
I have tried removing the text, setting margins to 0, removing whitespace, placing the divs inline with each other, setting the background image as a standalone image in HTML, changing the height of the image. I am stumped!
HTML:
<div class="main">
<h1 id="mainTitle">Sample Text</h1>
<hr>
<i class="fa fa-id-card" aria-hidden="true"></i><h3 id="underTitle">Sample Text</h3>
</div>
<input type="submit" class="btn" value="Sample Text">
<div class="projects">
<h1 id="proTitle">Sample Text</h1>
<img src="images/codebg.jpg" alt="Sample Text" id="codeimg">
</div>
CSS:
html, body{
font-family: 'Thasadith', sans-serif;
background-image: url(images/bg.png);
background-repeat: no-repeat;
}
.main{
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
top: 350px;
font-size: 0;
margin: 0 auto;
}
#mainTitle{ font-size: 100px;}
#underTitle{ font-size: 50px; margin-top: 10px;}
#mainTitle, #underTitle{
transition: font-size 1s;
}
#mainTitle:hover{
font-size: 110px;
}
#underTitle:hover{
font-size: 60px
}
.fa-id-card{
position: absolute;
transform: translateX(-125px);
top: 77%;
font-size: 20px;
}
hr{
margin: 0 auto;
padding: 0;
background-color: black;
}
.btn{
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
top: 560px;
width: 100px;
background-color: black;
color: white;
transition: width 1s ease;
}
.btn:hover{
color: white;
width: 110px;
}
.projects{
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
top: 1100px;
/*background-image: url(images/codebg.jpg);*/
width: 100%;
height: 100%;
margin: 0 auto;
}
#proTitle{
color: black;
margin: 0 auto;
}
#codeimg{
opacity: 0.4;
}
Ideally, there should be no gap between the images
Thanks for any help anyone is able to provide
You can change the position type of your image.
Add this code in your CSS file:
img
{
position: relative;
bottom: -4px;
}
I recreate your code changing the images.
You can see in this link:
https://codepen.io/mvinnicius/pen/aPyObB
I hope help you
Here are some minor changes that make it work:
CSS: Add break.before and break.after styles for your title id's
#mainTitle{
font-size: 100px;
break.after: 0; }
#underTitle{
font-size: 50px;
margin-top: 10px;
break.before: 0; }
#mainTitle, #underTitle{
transition: font-size 1s; }
#mainTitle:hover{
font-size: 110px;
break.after: 0; }
#underTitle:hover{
font-size: 60px;
break.before: 0; }
HTML: Trade <div class="main"> for the Semantically correct <main>, then instead of using <h1> and <h3>(which force space around them), wrap it in a <p> tag.
<main>
<div>
<p><span id="mainTitle">Sample Text</span>
<hr>
<i class="fa fa-id-card" aria-hidden="true"></i><span id="underTitle">Sample Text</span>
</p>
</div>
<input type="submit" class="btn" value="Sample Text">
<div class="projects">
<h1 id="proTitle">Sample Text</h1>
<img src="images/codebg.jpg" alt="Sample Text" id="codeimg">
</div>
</main>
play with .projects css
top and left
Hello take a look at this picture of the comp I am trying to mimic through html and css.
The top div is a regular div with a white background.
The bottom div will have a background video.
The html structure is simple and will look something like this:
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
</video>
</div>
CSS:
.top-div {
height: 500px;
width: 100%
}
.bottom-div {
height: 500px;
width: 100%;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
filter: brightness(30%);
-webkit-filter: brightness(30%);
}
I know how to properly set up the video, but I am unsure how to go about making the slanted effect.
I was thinking I could use a psuedo element to create a triangle and place it on top of the div and have it z indexed over the video div, but that seems a little hacky.
Is there a best practice to do this? I didnt write this question for someone to give me full code. I just need someone to point me in the right direction and I can do it myself.
Thanks!
Easy and simple way is use CSS transform: skew. Add this inside your div where you want to be slanted then adjust the degrees.
transform: skew(0deg,-5deg);
Above skew style means (0deg(x), -5deg(y)) axis.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:300px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}
.full-image {
width: 100%;
height: 200px;
}
.footer {
height: 100px;
background: rgb(253, 253, 253);
width: 100%;
margin-top: 425px;
z-index: 500;
position: relative;
}
<div class="headerimage">
</div>
<div id="backshape">
<img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
</div>
I've put together a pen using skew as #adam suggested.
http://codepen.io/anon/pen/XNMPWG
The HTML
<header class="header" id="header">
<div class="skew">
<div class="header-inner">
<h1 class="logo">White space</h1>
</div>
</div>
</header>
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Video</h1>
<p></p>
</section>
</div>
</main>
</div>
The CSS
html {
font-family: 'Roboto Condensed';
color: #fff;
background: #fafafa;
}
body {
padding: 0em 0em;
}
.header {
z-index: 1;
position: relative;
}
.header .skew:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 250px;
background: #00bcd4;
z-index: -1;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
}
.header .skew .header-inner {
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
margin: 0;
}
section
{
text-align:center;
color: white;
background-color: red;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
}
section h1 {
text-align: center;
color: white;
padding-top: 150px;
}
skewY() skews an element along the Y-axis by the given angle.
transform: skewY(-10deg);
How do you place text above an image, such that it runs across the bottom of the image.
i.e.
<div class="i_have_an_image">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
I am struggling to work it out, to see what I mean, The following web site, has a great example of this. I've seen it before on sites, heres an example snapshot of what I mean:
Wrap the image in an inline-block div which has position:relative.
Position the h2 absolutely with bottom:0 and width:100% and the height of the h2 will adjust automatically to the content of the positioned element.
.i_have_an_image {
display: inline-block;
position: relative;
}
.i_have_an_image img {
display: block;
}
.i_have_an_image h2 {
position: absolute;
margin: 0;
bottom: 0;
left: 0;
width:100%;
padding: 1em;
background: rgba(255, 255, 255, 0.5);
color: white;
}
<div class="i_have_an_image">
<img src="http://www.fillmurray.com/460/300" alt="">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.i_have_an_image{
position:relative;
width:200px;
height:200px;
}
h2{
position:absolute;
bottom:0px;
background:rgba(0,0,0,0.5);
color:#fff;
margin:0px;
}
<div class="i_have_an_image">
<img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.butFrame {
width: 32%;
position: relative;
cursor: pointer;
}
.butFrame .butHeading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 0;
display: block;
background: rgba(0, 0, 0, 0.5);
margin: 0;
font-family: inherit;
font-size: 1.2em;
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
<div class="butFrame">
<img src="https://unsplash.it/g/380/210?random">
<div class="butHeading">Heading</div>
https://jsfiddle.net/n0aLts9w/
Another solution of image with heading and sub heading. (As per your given image)
Demo Here
.i_have_an_image{
position: relative;
background-image: url(http://i.imgur.com/McIDx6g.jpg);
background: url((http://i.imgur.com/McIDx6g.jpg) no-repeat center center;
height: 400px;
width: 400px;
}
.title_wrap{
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
right: 0;
padding: 15px;
color: #ffffff;
}
.title_wrap h2 {
font-size: 20px;
margin: 0;
}
.title_wrap h6 {
font-size: 12px;
margin: 0;
}
<div class="i_have_an_image">
<div class="title_wrap">
<h2>Heading goes here</h2>
<h6>I appear on top of the image, but aligned along the bottom</h6>
</div>
</div>
You can make it like this:
I added only the "wrap" div
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color: #fff;
}
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
This is how I've been doing it recently. It's using the new html5 tag figcaption
It doesn't matter how big the image is or what you put in the figcaption it should just work.
figure.overlay {
display: inline-block;
position: relative;
margin: 0;
}
figure.overlay figcaption {
position: absolute;
background: rgba(0, 0, 0, .5);
color: #fff;
bottom: 4px;
width: calc(100%-10px);
padding: 5px;
}
<figure class="overlay">
<img src="http://www.dogbreedinfo.com/images/germanshepherdface.jpg">
<figcaption>
<h3>
'Some header of some sort!'
</h3> Words that make up a sentance! Or maybe 2 sentances.
<br />
<br />Even with a new line
</figcaption>
</figure>
Ho you can do it with flexbox simply like this:
.imageWrapper {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg");
background-size: 100%;
}
.textAboveImage {
width: 100%;
height: 50px;
background-color: grey;
z-index: 200;
opacity: 0.5;
}
<div class="imageWrapper">
<div class="textAboveImage">I'm text</div>
</div>
Cheers.
You can make it like this:
I added only the "wrap" div
HTML:
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
CSS:
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color:#fff;
}
I am trying to build a parallax scrolling website, but I have run into some trouble. All of my content divs are stacking on top of each other, and I can't figure out what to do to make them stop.
HTML
<body>
<div id="container">
<div id="depth0" class="parallax">
<div id="home" class="parallax">A Greener Home scroll down</div>
<div id="depth1" class="parallax">
<div id="nav">
home
go green
your area
how to
benefits
</div>
<div id="depth2" class="parallax">
<div id="gogreen"><img src="assets/images/go green bg.png" width="1280" height="909"><img src="assets/images/go green bg2.png" width="1280" height="94"></div>
<div id="depth3" class="parallax">
<div id="yourarea" class="parallax">
<img src="assets/images/in your area bg.png" width="1280" height="576">
<p><iframe src="http://batchgeo.com/map/2a9f0604b3bad18c47d7d2ab3dee7577" frameborder="0" width="80%" height="550" style="border:1px solid #aaa;border-radius:10px;"></iframe></p><p><small>View
In Your Area in a full screen map</small></p>
</div>
<div id="depth4" class="parallax">
<div id="howto" class="parallax">
<img src="assets/images/how to bg.png" width="1280" height="960">
<img src="assets/images/how to bg2.png" width="1280" height="520">
</div>
<div id="depth5" class="parallax">
<div id="benefits" class="parallax">
<img src="assets/images/benefits bg.png" width="1280" height="491">
<img src="assets/images/benefits bg2.png" width="1280" height="71">
</div>
</div>
</body>
CSS
#font-face {
font-family: 'capone_lightregular';
src: url('caponelight-webfont.eot');
src: url('caponelight-webfont.eot?#iefix') format('embedded-opentype'),
url('caponelight-webfont.woff') format('woff'),
url('caponelight-webfont.ttf') format('truetype'),
url('caponelight-webfont.svg#capone_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
margin: 0px;
padding: 0px;
height: 7000px;
background-color: #FDFDFD;
}
.parallax {
position: fixed;
height: 100%;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
#nav {
position: fixed;
text-align:center;
width: 100%;
}
#nav a {
text-decoration: none;
text-align: center;
padding-right: 4%;
width: 100%;
font-size: 55px;
font-family: "Capone Light";
color: #093;
font-style: normal;
text-transform: none;
}
#home {
height: 500px;
background-color: #FDFDFD;
}
#howto img {
width: 100%;
}
#depth5 #benefits img {
width: 100%;
}
#yourarea img {
width: 100%;
}
#gogreen img {
width: 100%;
}
#depth2 #yourarea p iframe {
margin-right: 10%;
margin-left: 10%;
}
#gogreen {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #090;
}
#yourarea {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #30C;
}
#howto {
margin-left: 0;
width: 100%;
display: block;
height: 500px;
border: 5px solid #CF3;
}
#benefits {
height: 500px;
border: 5px solid #90F;
}
body {
margin: 0;
padding: 0;
height: 7000;
}
jQuery
$(document).ready(function(){
//running scrollCheck()
scrollCheck();
$(window).scroll(function(){
scrollCheck();
});
function scrollCheck(){
//initialize variables
var pos = $(window).scrollTop(), //position of the scroll bar in pixels
q = .5; //speed modifier
//parallax
$("#depth0").stop().animate({
top: (-pos*1*q)+"px"
});
$("#depth1").stop().animate({
top: (-pos*2*q)+"px"
});
$("#depth2").stop().animate({
top: (-pos*3*q)+"px"
});
$("#depth3").stop().animate({
top: (-pos*4*q)+"px"
});
//nav bar
$("#nav").stop().animate({
top: Math.max(Math.min(1000,1000-pos),0)+"px"
});
}
});
Here's the jsfiddle: http://jsfiddle.net/yKT9W/
Here I am just trying to answer by looking at the code you have given (I have not tried it on my system). Looking at the CSS given above, i don't see Z-index mentioned any where.
Most of the times such overlapping issue will be fixed by z-index.
I would suggest you to try the same once.
Ref: Link