Develop Reference

Sticky div that scrolls to a point

I'm very new to JavaScript. My accomplishment is to be able to scroll down to the top of the right div (#aside) and have it be fixed while the other div continues to scroll down.
I've mimicked this code from here and added my own id and class but it will not work.
Here is my own version
HTML (#aside fixed div)
<div id="wrapper">
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
<header></header>
<div id="main">
<p>Curabitur pellentesque erat feugiat justo euismod, et auctor erat tristique. Duis maximus arcu non nisl placerat cursus eu nec felis. Nunc in suscipit elit. Curabitur nec fermentum dui. Fusce et molestie odio. Mauris mattis commodo risus sit amet
fringilla. Quisque pretium sem ut est iaculis, a euismod lacus convallis. Fusce porta, justo quis porttitor commodo, justo velit condimentum augue, at tempor nunc dui pretium lacus. Phasellus eget leo neque.</p>
<p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
<p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
<p>Curabitur pellentesque erat feugiat justo euismod, et auctor erat tristique. Duis maximus arcu non nisl placerat cursus eu nec felis. Nunc in suscipit elit. Curabitur nec fermentum dui. Fusce et molestie odio. Mauris mattis commodo risus sit amet
fringilla. Quisque pretium sem ut est iaculis, a euismod lacus convallis. Fusce porta, justo quis porttitor commodo, justo velit condimentum augue, at tempor nunc dui pretium lacus. Phasellus eget leo neque.</p>
<p>Nam malesuada arcu et eros laoreet faucibus. Quisque sit amet lectus ipsum. Ut bibendum, eros et molestie egestas, enim felis iaculis turpis, sit amet consequat sem erat id dolor. Vivamus a leo viverra, viverra odio a, imperdiet dolor. Morbi libero
neque, gravida ut sem eget, dictum euismod urna. Vestibulum risus ex, venenatis eget fermentum quis, scelerisque eget elit. Phasellus vel sodales urna. Quisque quis tempor ex. Proin sit amet odio eleifend, tempor purus vel, venenatis sem. Vivamus</p>
<p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
</div>
<div id="aside">
<p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
<p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
<p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
velit mollis sollicitudin. Nulla vehicula nisl ut imperdiet tristique. Ut diam justo, condimentum facilisis arcu in, porta feugiat orci. Morbi non venenatis eros. Cras at quam ex. Sed egestas condimentum odio, quis ornare orci.</p>
<p>Ut luctus dictum aliquet. Duis interdum sodales nisl ac egestas. Nunc tempus fringilla risus vel dapibus. In sit amet elit eu felis porta pulvinar. Cras pretium at tellus nec facilisis. Curabitur finibus ut ex eget consectetur. Cras at libero gravida
.
</p>
</div>
<footer></footer>
</div><!--wrapper-->
CSS (#aside and .stick)
.nav_links {
padding: 0;
margin: 15px;
}
.nav_links li {
display: inline-block;
}
.nav_links a {
text-decoration: none;
margin-left: 80px;
color: #000;
}
.nav_links a:hover {
color: #ada;
transition: .33s;
}
header {
width: 100%;
top: 70px;
position: relative;
padding-top: 35%;
background-image: url("park1.jpg");
background-size: 100%;
}
#main {
background-color: #ded;
top: 60px;
width: 60%;
float: left;
}
#aside {
float: right;
width: 30%;
top: 200px;
background-color: #ded;
}
.stick {
position: fixed;
top: 0px;
}
footer {
clear: both;
height: 200px;
position: relative;
background-color: #aaa;
}
Javascript
var aside = document.getElementById("#aside");
var stop = (aside.offsetTop - 210);
window.onscroll = function(e) {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
console.log(scrollTop, aside.offsetTop);
if (scrollTop >= stop) {
aside.addClass = 'stick';
} else {
aside.removeClass = '';
}
}

Reveal image as user scrolls down

I was checking this website: http://www.flagofplanetearth.com/
You can see, the images reveal more as you scroll down.
I have seen such an effect on only a few other websites and was wondering how it is done. I don't even know what it's called so couldn't really search for it.
Thanks.

It's called a parralax effect.
Here's a great documentation on how it works
Cheers!

That's a parallax effect.
Simple method: (fixed image)
.parallax {
background-attachment: fixed;
}
Advanced method: (what you saw)
1) Use same CSS
2) Use the following JS:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
Check out this:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
#parallax {
background-image: url('http://lorempixel.com/400/400/abstract/');
background-attachment: fixed;
min-height: 400px;
}
<div id="parallax"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et arcu est. Praesent nec lacinia mi. Nulla augue erat, egestas at tortor et, gravida aliquet erat. Proin in rutrum velit. Vestibulum volutpat, leo et rutrum gravida, mauris urna malesuada justo, ut condimentum diam neque non nisi. Aenean malesuada, nisi non dapibus imperdiet, leo libero iaculis dolor, in convallis augue ante nec urna. Suspendisse vulputate vel ex dictum aliquet. Aliquam dapibus scelerisque dapibus. In ut lorem a leo feugiat iaculis cursus sit amet lectus. Integer id ante sed mi egestas tincidunt. Duis maximus augue eu ipsum ultrices dictum.
<br><br>
Proin eget enim auctor, vehicula dui eget, vulputate leo. Donec pulvinar diam interdum, vulputate erat nec, blandit risus. Fusce tristique velit libero, porttitor egestas libero feugiat ullamcorper. Maecenas bibendum tristique efficitur. Cras fringilla ac eros nec iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien molestie, molestie magna nec, consectetur velit. Etiam vestibulum pretium quam ac imperdiet. Nullam quis nisl eget felis vestibulum bibendum nec id velit. In vel commodo nisi, nec euismod quam. Duis ultrices pretium imperdiet.
<br><br>
Pellentesque quis velit lectus. Morbi id tincidunt libero. Fusce id convallis nulla, sed porttitor eros. Morbi eget libero vel mi efficitur placerat. Fusce sed commodo ex. Nulla gravida enim et elementum fringilla. Vestibulum arcu dui, suscipit ut mauris ut, iaculis aliquam tellus. Praesent in volutpat justo. Morbi volutpat metus at magna rhoncus, in molestie odio vestibulum. In vel euismod nibh. Phasellus ac dictum velit. Donec tincidunt lacus a diam tempor luctus ac ut eros. Etiam condimentum nunc in ex malesuada vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br><br>
Fusce tortor magna, fringilla sit amet dignissim in, euismod quis augue. Phasellus egestas erat eu pellentesque blandit. Vivamus vitae pellentesque arcu. Quisque commodo, leo sed auctor tincidunt, erat sem blandit nulla, quis vestibulum magna lorem sed tellus. Suspendisse ultricies hendrerit eleifend. Cras viverra, diam vitae vulputate mattis, quam augue aliquet odio, sit amet dapibus felis odio id lectus. Proin sit amet ornare mauris, quis sodales diam. In hac habitasse platea dictumst. Quisque eget hendrerit tellus. Suspendisse vulputate non dui vel auctor.
<br><br>
Curabitur volutpat eros tellus, ut fringilla nibh cursus eget. Aenean sed urna et nulla aliquet tempor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod fermentum risus, sit amet semper enim. Morbi pulvinar sapien a commodo tempor. Duis ut tellus malesuada, consequat neque a, accumsan nibh. Pellentesque convallis neque sed odio tempor, quis vestibulum eros viverra. Nunc tincidunt ligula ut dolor mattis, eget mollis velit scelerisque. Fusce sed enim sollicitudin, aliquam mi non, mattis diam. Nullam faucibus massa id nisl sagittis, id pharetra enim pharetra. Ut a varius libero, ac malesuada arcu.</div>

How to stick the bottom part of a div to top of the screen when scrolling down?

Imagine a div that has a height of 300 px, and at its bottom there is another div nested with a height of 100 px. I'd like to freeze (stick to top) this 100 px div, but the background properties (eg. background color) are set in its container div.
jsfiddle
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis. Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices. Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>
Thank you all in advance!

A possible solution, using jQuery:
$first = $('#first');
$sticky = $('#sticky');
$(window).scroll(function() {
$first.toggleClass('fixed', $(window).scrollTop() > $first.height() - $sticky.height())
.css('top', $(window).scrollTop() - $first.height() + $sticky.height());
});
The CSS:
.fixed{
position: relative;
top: 0;
left: 0;
width: 100%;
}
JS Fiddle Demo

if I understand your question the "sticky" part has a rgba background so I guess the first container has background image or simillar.
I your case I would stick the full container with negative top value to make the effect is the sticky part the one fixed positioned.
basically you use this simple jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$("#first").addClass("fixed");
} else {
$("#first").removeClass("fixed");
}
});
and you add this class:
.fixed {position:fixed;top:-200px}
Here's your FIDDLE

Something like this?
Updated 2
JSFiddle
Bassically you need to add the following class style to your CSS:
#sticky.top {
position: fixed;
top: 0;
}
And the following jQuery.
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 200) {
$("#sticky").addClass("top");
} else {
$("#sticky").removeClass("top");
}
});
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#sticky.top {
background:#585858;
position: fixed;
top: 0;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis.
Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo
commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer
lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt
neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan
sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum
vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu
elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices.
Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie
justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor
sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar
sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>

Fixed Width and Height Text Container with Prev/Next Button

I'm want to create a text container with fixed width and height like it's shown in the image.
This is an example how the box should look like: http://imgur.com/eW3ggwt
I've tried the scrollbar box didn't work.
Example of the code used:
CSS Code:
.box{
direction:rtl;
position:absolute;
width: 50%;
height: 50%;
top:0;
left:0;
overflow:auto;
border: solid #000 2px;
}
.box-text {
text-align:left;
direction:ltr;
}
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
::-webkit-scrollbar-button {
color: #0000;
}
HTML Code
<div class="box">
<div class="box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend hendrerit magna, ac tristique nulla vestibulum id. Aenean aliquam vehicula nunc sit amet convallis. Mauris sit amet lectus a metus accumsan dignissim. Integer pharetra quam nec lectus mattis lobortis. Aliquam id risus vel ante ornare rhoncus ac quis lacus. Duis dignissim urna sed leo dictum fermentum. Vivamus id orci odio, in congue quam.
Mauris adipiscing justo nec dui vulputate vel dapibus urna fermentum. Aliquam dictum erat at urna molestie consectetur ut quis justo. Aliquam eu est mauris, ac condimentum erat. Aliquam pellentesque sem cursus quam feugiat at dignissim sem bibendum. Phasellus convallis commodo justo, dapibus egestas nisl ultricies non. Ut dui mauris, blandit ac tincidunt quis, interdum eget erat. Fusce nisi quam, tincidunt sed blandit eget, euismod eu felis. Sed consequat ligula id lacus fringilla quis mollis leo commodo. Morbi quis elementum diam. Vestibulum ultrices nunc nec nisl imperdiet molestie. Maecenas rutrum viverra dignissim. Nulla et orci ut nisl volutpat eleifend. Donec scelerisque elit ac arcu iaculis luctus.
Donec orci lectus, bibendum quis egestas vitae, cursus fringilla tellus. Cras at ipsum augue. Ut ornare eleifend volutpat. Morbi tristique sapien sed ipsum sodales non pharetra tellus porttitor. Aenean justo mi, tincidunt sit amet aliquam vitae, ornare ac libero. Donec faucibus ultrices augue non cursus. Pellentesque a ipsum eros, a rhoncus arcu. Mauris massa purus, tempus ultrices fermentum vel, sagittis id eros. Nam id massa dapibus mauris convallis imperdiet. Nullam erat dui, aliquet eu dignissim vel, convallis vitae enim. Quisque vel nulla dolor, nec mollis tortor. Phasellus fermentum velit eu ante pharetra interdum.
Aliquam pharetra, urna sit amet tincidunt ullamcorper, felis lectus posuere dui, ut bibendum lectus mi quis mi. Aliquam erat volutpat. Curabitur volutpat accumsan urna a aliquam. Ut quis tellus at quam ornare sollicitudin id et odio. Etiam fermentum pharetra orci, in posuere nisi condimentum at. Sed mattis accumsan convallis. Ut commodo posuere laoreet. Curabitur iaculis vestibulum arcu, vel egestas nibh tristique semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris consequat dui non sapien consequat euismod. Nulla facilisi. Etiam venenatis ligula id risus auctor eu faucibus est adipiscing. Quisque elit justo, vehicula sed dapibus nec, viverra ultrices est. Nunc vel orci eu dui vehicula vehicula tincidunt sagittis dui.
Etiam odio ipsum, feugiat vel vulputate ac, eleifend ut lacus. Aliquam erat volutpat. Vivamus tellus ante, scelerisque sed sollicitudin vitae, semper in mauris. Curabitur non elit risus. Nam vitae facilisis enim. Nam pulvinar, eros at fringilla molestie, nisi diam ultricies diam, consectetur facilisis mi felis vitae lectus. Mauris augue sem, rhoncus sit amet varius at, venenatis at dolor. Quisque pharetra, erat at blandit venenatis, massa urna eleifend felis, in luctus tortor ligula nec urna. Nam aliquam blandit justo, eu ornare leo luctus a. Proin id volutpat augue. Praesent mollis tempor mi et congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div></div>
Any suggestions?

Do you want to keep fixed the box or the box-text? If it is the entire box you can't achieve fixed width or height using %. You should express it in px. If you need to use % then you can add a script that replaces width and height properties once the html is loaded
<script>
var boxWidth = document.getElementById('myId').offsetWidth;
var boxHeight = document.getElementById('myId').offsetWidth;
document.getElementById('myId').style.width = boxWidth + "px";
document.getElementById('myId').style.height = boxHeight + "px";
</script>
Remember to assign 'myId' to your box div

A simple example for an overflow box: http://jsfiddle.net/fixit/v5kumrah/
Using the "overlay" value:
.box-text {
border: 1px solid black;
background-color: lightblue;
width: 300px;
height: 210px;
overflow: overlay;
}

Navigation bar menu cannot work in Microsoft Internet Browser but can work in Firefox, Chrome & Opera

I have the following code that is suppose to illustrate navigation menu bar that can float.
Unfortunately, it cannot work in Microsoft IE (IE 8, 9) but it
<html lang="en">
<head>
<title></title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style type="text/css">
body {
background-color: #333;
color: #999;
font: 12px/1.4em Arial,sans-serif;
}
#wrap {
margin: 10px auto;
background: #666;
padding: 10px;
width: 700px;
}
#header {
background-color: #666;
color: #FFF;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 5px;
}
#navWrap {
height: 30px;
}
#nav {
padding: 5px;
//background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: right;
padding: 3px 8px;
background-color: #FFF;
margin: 0 10px 0 0;
color: #F00;
list-style-type: none;
}
#nav li a {
color: #F00;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
}
br.clearLeft {
clear: left;
}
.bigNum {
font-size: 20px;
color: #000;
background: #FFF;
padding: 2px;
}
#eduHomeBackLink {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #333;
background-color: rgba(0,0,0,0.85);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
font-family: Lato,'Lucida Grande',sans-serif;
}
#eduHomeBackLink a {
padding: 10px;
border: none;
}
#eduHomeBackLink a:hover {
color: #FFF;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
<div id="navWrap">
</div>
</div>
<p><a name="1"></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta justo in tellus porttitor non placerat dui pulvinar. Aliquam erat volutpat. Morbi ullamcorper libero sit amet tortor porta iaculis. Duis sit amet diam dolor. Mauris bibendum pharetra justo, sed ornare arcu scelerisque vitae. Integer molestie dignissim lacinia. Etiam sagittis consectetur iaculis. Pellentesque fringilla nulla at tortor dictum lobortis.
</p>
<div id="eduHomeBackLink">« Back to Education Center Home</div>
<p>
<span class="bigNum">1.</span> Aliquam erat volutpat. Integer pulvinar dignissim lacus eu lacinia. Sed vitae orci eget nisl ultricies feugiat quis ut velit. Sed urna mauris, viverra volutpat pulvinar et, tempus vel odio. Aenean at posuere massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis augue nisi, quis ornare nisl. Nulla sagittis neque at massa venenatis tincidunt. Morbi sed nibh magna, vel consectetur nisi. Nullam tortor augue, scelerisque et consequat eu, fermentum at eros. Donec scelerisque ullamcorper tincidunt.
</p>
<div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<br class="clearLeft" />
</div>
<p>
Pellentesque ut nulla dolor. Sed non diam odio, ac luctus mauris. Nunc erat turpis, imperdiet vel laoreet laoreet, scelerisque vel dui. Sed nec nisl nulla, ut gravida neque. Mauris augue nibh, accumsan id viverra et, pellentesque a orci. Integer venenatis congue urna a ornare. Fusce in facilisis tortor. In lobortis est non lacus cursus venenatis. Donec a metus erat, id rhoncus turpis. Quisque vitae venenatis tellus. Donec quis risus erat, in luctus justo. Nulla ultrices, urna quis faucibus vehicula, lorem nibh tristique magna, nec tristique augue massa sit amet arcu. Donec malesuada, erat iaculis pretium ultricies, lorem nisl lacinia tellus, vel luctus augue nunc eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dignissim, orci ut ultrices aliquet, enim nisl auctor magna, nec feugiat eros lorem vehicula ipsum.
</p>
<p>
Maecenas vitae mauris enim, vel pretium turpis. Sed pharetra accumsan tellus. Maecenas pulvinar ipsum viverra sapien volutpat blandit. Vivamus vel massa velit. Pellentesque condimentum tincidunt aliquam. Vivamus mattis auctor diam, eu commodo massa laoreet ut. Sed congue faucibus arcu, quis hendrerit nisl pellentesque non. Nunc sagittis condimentum lacus. Cras tincidunt sem quis lorem tempor eget porta magna pulvinar. Donec molestie diam sagittis sem tristique in iaculis ligula aliquet. Aenean rutrum eleifend metus nec tempus. Integer nisi ligula, pretium in porta vel, euismod non lectus. Aliquam erat volutpat. Praesent sit amet massa purus.
</p>
<p><a name="2"></a>
Ut pellentesque, lectus ut porttitor ullamcorper, velit nulla dignissim tellus, eu luctus nibh mauris non arcu. Mauris viverra purus et leo condimentum adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum facilisis lacus, quis rutrum purus tristique non. Nam vestibulum mauris eu sem porttitor accumsan. Phasellus at eleifend neque. Nam interdum ultrices commodo. Nunc dignissim aliquet dui. Nunc id nisl congue dolor pharetra pulvinar vel ac lectus. Nunc mi justo, semper id sollicitudin et, luctus eget quam. Ut condimentum porta consectetur. Donec nunc turpis, molestie ac semper ut, aliquet id nulla. Vestibulum id ipsum purus, sed tempor lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
<span class="bigNum">2.</span> Aliquam erat volutpat. Duis euismod porta eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porta tincidunt gravida. Praesent sed mi nisl, non pretium mi. Suspendisse nibh orci, mollis eget adipiscing id, malesuada quis enim. Nullam facilisis elit ut magna facilisis ac eleifend diam tempor. Curabitur et justo est, a sagittis velit. Proin mollis, libero ac luctus faucibus, ipsum risus consequat dolor, viverra sagittis felis lorem non quam. Nam risus nisl, congue a semper eu, dapibus ac nunc. Maecenas tortor nisl, pellentesque eu luctus at, viverra ut libero. Nullam quis egestas massa. Donec dapibus rhoncus risus nec tincidunt. Suspendisse condimentum ante sit amet odio consequat id suscipit ante tempus. Aenean purus leo, blandit a iaculis non, tristique ullamcorper ante.
</p>
<p>
Phasellus consectetur, ante nec pretium hendrerit, arcu nunc ullamcorper lectus, non pulvinar sapien nibh ac sem. Nullam dignissim erat sit amet sapien convallis ornare. In hac habitasse platea dictumst. Fusce et ante ut turpis condimentum dictum. Mauris elit justo, laoreet eget consectetur sed, suscipit ut augue. Phasellus id sollicitudin enim. Aenean et justo magna, in ultricies lectus. Nunc blandit quam rhoncus quam pretium tempor. Aenean nec fermentum nibh. Donec ornare magna nec leo tempus ac varius tortor hendrerit. Ut vel erat purus. Maecenas volutpat convallis est a sagittis.
</p>
<p>
Duis mattis orci at justo molestie blandit. Nunc blandit tortor vitae ipsum congue ut pharetra nibh accumsan. Phasellus dapibus risus sed purus laoreet mattis. Ut placerat imperdiet diam, ut blandit dolor auctor vel. Nunc in odio quis eros fringilla consectetur. Ut porttitor imperdiet arcu nec ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis hendrerit felis id mauris pulvinar faucibus sodales magna dictum.
</p>
<p>
Mauris in tincidunt ante. Donec fermentum varius interdum. Nulla consectetur faucibus purus, eu interdum nulla aliquet eu. Cras id lectus lacus, eleifend rhoncus lorem. Integer malesuada tristique lobortis. Phasellus a dolor non turpis euismod euismod vel a enim. Duis eu augue a elit commodo pellentesque. Ut dolor odio, ornare ac faucibus sed, tincidunt vel ipsum. Nunc et nibh eros, ut vehicula massa. Donec tempus, augue vel consequat adipiscing, nibh lacus mollis nunc, egestas commodo nisi quam sed orci.
</p>
<p>
Maecenas sit amet tortor nunc. Donec nec tempor augue. Mauris mi dolor, dictum et dictum a, tincidunt sit amet sapien. Nunc dapibus nunc nec arcu tristique sit amet consectetur libero eleifend. Suspendisse dignissim massa eu neque lacinia tincidunt. Vivamus vel nisl eu nulla convallis pretium. Nunc ante justo, hendrerit a malesuada vitae, semper a risus. Nunc viverra purus quis lorem cursus quis ultrices mauris ullamcorper. Pellentesque luctus, nibh vel elementum facilisis, nisi turpis aliquet augue, et feugiat nisi massa sed risus. Aenean dui velit, molestie placerat euismod vel, sodales at mauris. Donec leo felis, eleifend nec placerat sed, placerat vulputate libero.
</p>
<p>
Nullam in mauris eleifend lorem mollis facilisis dapibus vel felis. Morbi pharetra euismod semper. Vivamus mollis gravida imperdiet. Proin mattis, nulla sed lobortis tincidunt, mauris dui suscipit dolor, sed fermentum nisi orci eget neque. Ut mattis leo eu dolor fringilla eu auctor tortor blandit. Mauris eleifend risus nec felis elementum mattis. Nulla rhoncus ante quam, eu eleifend leo. Aliquam euismod felis in nunc suscipit congue. Sed facilisis sapien a erat posuere ac facilisis lectus cursus. Praesent nulla felis, placerat nec lacinia sit amet, laoreet eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent non urna mattis dui porttitor egestas at sed tellus. Integer id commodo quam. Nullam fermentum, velit nec sagittis placerat, magna nibh posuere dolor, vel dictum mi tortor et dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean iaculis, orci eu pulvinar pulvinar, tellus nisl luctus lectus, ac scelerisque leo purus non eros.
</p>
<p>
Cras est sem, rutrum non malesuada ac, fringilla et risus. Mauris sit amet quam eget orci varius mattis quis eu augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at ipsum eros. Pellentesque porta vestibulum mi, a pulvinar est condimentum scelerisque. Duis vitae metus a metus euismod tempor. Nunc augue mi, aliquam at commodo sed, condimentum a lorem. Proin rhoncus faucibus congue. Quisque diam ante, lacinia non fermentum at, dapibus nec lacus. Nunc suscipit vestibulum sem, a euismod mauris imperdiet et. Quisque gravida nulla sit amet magna posuere vel fringilla urna porta. Praesent rhoncus congue quam a gravida. Curabitur nisl erat, mattis non pharetra vel, tincidunt sit amet lorem. Donec tristique lacus luctus augue dapibus a semper eros suscipit.
</p>
<p>
Fusce interdum tincidunt felis, id ullamcorper urna gravida ac. Ut ut mi quam. Vestibulum ultricies consequat porta. Donec orci felis, viverra non sodales a, gravida id enim. Duis vulputate lacus et nunc fermentum eu elementum erat pharetra. Aliquam et quam tortor, in ultrices eros. Integer elit ipsum, cursus at varius sed, molestie a tellus.
</p>
</body>
</html>

The page is in quirks mode that's why it isn't working. Please add the suitable document type then it will work.
Example:
Add this to the top of the page and then try.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">