CSS Overflow

by Austin Crane

HTML

<body>
<div class="banner">
<nav class="main-navigation main-nav-pos " role="navigation">
	 <li class="learn">
     	<a class="learn" href="http://liveatmonarch.com/bw/cullowhee/learn" >
        <span class="nav-spacer">Learn</span>
        <div class="nav-info">
        	hello, long sentence that goes out of the div for some reason?
        </div><!-- nav info -->
        <div class="butterfly"></div><!-- butterfly -->
        </a>
     </li>
     <li class="live">
    	 <a class="live"  href="http://liveatmonarch.com/bw/cullowhee/live" >
         <span class="nav-spacer">Live</span>
         <div class="nav-info">
        	hello again
        </div><!-- nav info -->
        <div class="butterfly"></div><!-- butterfly -->
         </a>
     </li>
     <li class="parents">
     	<a class="parents"  href="http://liveatmonarch.com/bw/cullowhee/for-parents" >
        <span class="nav-spacer">For Parents</span>
        <div class="nav-info">
        	hello
        </div><!-- nav info -->
        <div class="butterfly"></div><!-- butterfly -->
        </a>
     </li>
    
     <div class="nav-bottom"></div>
</nav><!-- #site-navigation -->
    </div><!-- banner -->
 

<div id="page"></div>
                                
                                    <br>
    <br>
        <br>
            <br>
                <br>
                    <br>
                        <br>
                            <br>
                                <br>
                                    <br>
    <br>
        <br>
            <br>
                <br>
                    <br>
                        <br>
                            <br>
                                <br><br>
    <br>
        <br>
            <br>
                <br>
                    <br>
                        <br>
                            <br>
                                <br>
                                    <br>
    <br>
        <br>
            <br>
                <br>
                   ...

CSS

body {background-color: #000;}
.banner {
	height: 300px;
	overflow: hidden;	
	/*z-index: 800;*/
	position: relative;
}
.main-nav-pos  {
		position: absolute;
		bottom: 15px;
		height: 100px;
	}
	.main-nav-fixed  {
		position: fixed;
		top: 0px;
		height: 50px;
	}
	.main-nav-pos a {
		padding: 25px 0 25px 0%;
	}
	.main-nav-fixed a {
		padding: 15px 0 15px 0%;
	}
	.main-navigation  {
		display: inline-block !important;
		text-align: left;
		width: 100%;
		z-index: 1000;
	}
	.main-navigation a {
		display: inline-block;
		text-decoration: none;
		font-family: 'Nunito', sans-serif;
		font-size: 14px;
		color: #fff;
		text-transform: uppercase;
		white-space: nowrap;
		border-radius: 10px;
		font-weight:300;
		z-index: 1000;
		position: relative;
		-webkit-box-shadow: 2px 0px 12px 2px rgba(0,0,0,0.75);
		-moz-box-shadow: 2px 0px 12px 2px rgba(0,0,0,0.75);
		box-shadow: 2px 0px 12px 2px rgba(0,0,0,0.75);
	}
	.main-navigation li.learn,
	.main-navigation li.live,
	.main-navigation li.parents {
		margin: 0 1% 0 0;
		width: 24%;
		display: inline-block;
	}
	.main-navigation li.ask {
		margin: 0 0 0 0;
		width: 24%;
		display: inline-block;
		float: right;
	}
	.main-navigation a.learn ,
	.main-navigation a.live,
	.main-navigation a.parents,
	.main-navigation a.ask
	{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.main-navigation a.learn {
		background-color: rgba(255,0,255, 0.85);
	}
	.main-navigation a.live {
		background-color: rgba(0,0,255, 0.85);
	}
	.main-navigation a.parents {
		background-color: rgba(127,0,255, 0.85);
	}
	.main-navigation a.ask {
		background-color: rgba(252,0,75, 0.85);
		margin: 0 0 0 0;
	}
	.nav-spacer {
		padding: 0 0 0 10px;	
	}
	.main-navigation a:hover {
		color: #eee;
	}
.nav-info, .nav-info-fixed {
	width: 100%;
	position: absolute;
	top: 0%;
	background-color: #fff;
	border-radius: 10px;
	z-index: 1000;
	height:100%; 
	display:block;
    white-space: normal;
	margin: 0 0 10px 0;
	background-color: rgba(255,255,255,.8);
	color:...

JavaScript

// Sticky nav
// ________________________________________

$(window).on('scroll', function () {
	 	 
		 var scrollTop     = $(window).scrollTop(),
		 $main=$('.main-navigation'),
		 $navbot=$('.nav-bottom'),
		 $navinfo=$('.main-navigation li a').children('.nav-info'),
		 $navinfofixed=$('.main-navigation li a').children('.nav-info-fixed'),
        elementOffset = $('#page').offset().top,
        fromtop      = (elementOffset - scrollTop);
		
		if ( fromtop <= 30 ) {
			// Your div has reached the top
			$main.removeClass('main-nav-pos').addClass('main-nav-fixed');
			$navinfo.removeClass('nav-info').addClass('nav-info-fixed');
			$navbot.css({"display":"none"});
		} else {
			$main.removeClass('main-nav-fixed').addClass('main-nav-pos');
			$navinfofixed.removeClass('nav-info-fixed').addClass('nav-info');
			$navbot.css({"display":"block"});
		}
		
});

//  Nav hover popups 
// ________________________________________

$('.main-navigation li a').hover(
    function() {
        if ( $('.main-navigation').hasClass('main-nav-pos') ) {
            //display heading and caption
            $(this).children('.nav-info').animate({"height":"100%"}, 100);
            $(this).children('.nav-info').animate({"top":"-105%"}, 'fast');
            $(this).children('.butterfly').css({"display":"block"}, 'slow');
        }
        else
        {
            //display heading and caption
            $(this).children('.nav-info-fixed').animate({"height":"100%"}, 100);
            $(this).children('.nav-info-fixed').animate({"top":"105%"}, 'fast');
        }
    },
    function() {
        if ( $('.main-navigation').hasClass('main-nav-pos') ) {
            //hide heading and caption
            $(this).children('.nav-info').animate({"height":"100%"}, 100);
            $(this).children('.nav-info').animate({"top":"0%"}, 'fast');
            $(this).children('.butterfly').css({"display":"none"}, 'slow');
        }
        else 
        {
            //hide heading and caption
        ...