SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Static-to-Absolute menu problems...

    I'm trying to create a menu that is initially static, but after the page has been scrolled down to a certain point, the menu then "hovers" and scrolls with the page scroll. So in other words, it starts off as position "static" and then dynamically turns to "fixed" if certain conditions are met.

    ...or at least this is what I'm trying to do...

    I'm having problems making the menu stay with the given amount of scrolled content. In all honesty, I think it's the math that's kicking my butt in this but I might be wrong--there's a good amount of variables in this. I think once you see the page, you'll see what I'm trying to do here (and please remember that I've been working on this in FF 3.6--I still have yet to get to IE flavors, etc).

    Long story short: The menu stays at the top at first and then pops down where afterwards, it THEN begins to scroll with the content. The position it pops down to is the position I need it to start at until I scroll down to it where upon it should then begin to scroll with the content. How do I make it do this? The big gray area is the header and the menu should start at the bottom of that but then scroll down with the page when the top of the window's viewport meets the top of the menu...

    Any help on this would be VERY appreciated... It's driving me bonkers.

    Below is my code...

    index.php:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head profile="http://gmpg.org/xfn/11">
    
    		<title>Menu Test</title>
    
    		<style type="text/css">
    			*{border:0;margin:0;padding:0;}
    			body{height:100%;color:#000;font:0.8em Arial,Helvetica,Sans-Serif;}
    			a{color:#030;text-decoration:none;}
    			a:hover{color:#096;}
    			.current_page_item a{color:#096;}
    			input,select,textarea{border:#999 1px solid;font-size:12px;padding:2px;}
    			select{padding:0;}
    			li{list-style:none;}
    			input[type="submit"]{cursor:pointer;background:#fff;}
    			input[type="submit"]:hover{color:#036;}
    
    			/*========= LAYOUT =========*/
    			#w{height:100%;}
    			* html #w{}
    			#page{background:transparent;margin:0 auto;width:960px;}
    			/*--- Main Columns ---*/
    			#columns{margin:0;padding:0 15px 25px;}
    			.col1{float:left;width:550px;}
    			.col2{float:right;width:350px;}
    			/*--- Sub Columns ---*/
    			.subcol{width:160px;}
    			.subcol h2{color:#030;font-size:14px;padding:0 0 10px;}
    
    			/*========= HEADER =========*/
    			#header{position:relative;float:left;padding-bottom:60px;width:100%;background:gray;}
    			#top{width:100%;float:left;text-align:right;}
    			#top ul li{display:inline;}
    			#top ul li a{padding:0.5em;color:#fff;}
    			#middle{padding-top:2em;padding-bottom:1em;width:100%;height:100px;float:left;}
    			#middle #logo{width:25%;display:inline;float:left;}
    			#middle #logo img{text-align:center;}
    			#middle #title{width:75%;display:inline;float:right;text-align:center;}
    			#middle #title h1{padding-top:0.5em;padding-bottom:0.3em;width:100%;letter-spacing:0.7em;clear:both;float:left;text-align:center;}
    			#middle #title h1 a{display:block;color:#fff;}
    			#middle #title p{width:100%;letter-spacing:0.5em;clear:both;text-align:center;}
    			#middle #title p a{display:block;font-style:italic;font-weight:bold;color:#fff;}
    			#bottom{border-top:1px solid #000;position:absolute;left:0;bottom:0;width:960px;height:60px;background:black;}
    			#bottom ul{margin-top:5px;}
    			#bottom ul li{display:inline;}
    			#bottom #links{border-left:1px solid #000;width:699px;height:30px;display:inline;float:left;background:#fff;}
    			#bottom #links ul li a{padding:0.5em;font-size:1.2em;font-weight:bold;}
    			#bottom #search{border-right:1px solid #000;width:259px;height:30px;display:inline;float:right;background:#fff;}
    			#bottom #search input[type="text"]{border:1px solid #000;margin-top:5px;margin-right:5px;width:90%;height:100%;float:right;}
    			#bottom #search input[type="text"]:hover{}
    			#bottom #sub_links{border-top:1px solid #000;padding-top:1em;width:100%;height:30px;float:left;font-style:italic;}
    			#bottom #sub_links ul{margin-top:-0.5em;padding-bottom:0.5em;}
    			#bottom #sub_links ul li{display:inline;}
    			#bottom #sub_links ul li a{padding:0.5em;font-weight:bold;color:#fff;}
    			#bottom #sub_links ul li a:hover{color:#096;}
    			#footer{position:fixed;left:10%;bottom:0;width:80%;height:30px;text-align:center;}
    		</style>
    </head>
    
    <body>
    	<div id="page">
    		<div id="header">
    			<div id="top">
    				<ul>
    					<li><a href="#">Register</a></li>
    					<li><a href="#">Log in</a></li>
    					<li><a href="#" title="Subscribe to the RSS Feed">RSS</a></li>
    					<li><a href="#" target="_blank" title="Subscribe to the E-mail RSS Feed">E-MAIL RSS</a></li>
    					<li><a href="#"><img src="#" alt="" /></a></li>
    				</ul>
    			</div>
    			<div id="middle">
    				<div id="logo">
    				</div>
    				<div id="title">
    					<h1><a href="#" title="Title">Title</a></h1>
    					<p><a href="#" title="sub">Sub</a></p>
    				</div>
    			</div>
    			<div id="bottom">
    				<div id="links">
    					<ul>
    						<li><a href="#">Home</a></li>
    						<li><a href="#" title="About">About</a></li>
    						<li><a href="#" title="Blah">Blah</a></li>
    						<li><a href="#" title="Lorem">Lorem</a></li>
    						<li><a href="#" title="Ipsum">Ipsum</a></li>
    					</ul>
    				</div>
    				<div id="search">		
    					<form method="get" id="searchform" action="#">
    						<input type="text" value="Enter your search keywords here..." onclick="this.value='';" name="s" id="s" />
    					</form>
    				</div>
    				<div id="sub_links">
    					<ul>
    						<li><a href="#" title="#">Lorem Ipsum 1</a></li>
    						<li><a href="#" title="#">Lorem Ipsum 2</a></li>
    						<li><a href="#" title="#">Lorem Ipsum 3</a></li>
    						<li><a href="#" title="#">Lorem Ipsum 4</a></li>
    						<li><a href="#" title="#">Lorem Ipsum 5</a></li>
    						<li><a href="#" title="#">Lorem Ipsum 6</a></li>
    					</ul>
    				</div>
    			</div>
    		</div>
    		<div id="columns">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sagittis feugiat. Curabitur orci augue, viverra nec fringilla vitae, pulvinar a neque. Nullam sagittis orci vel augue faucibus nec mattis mi varius. Curabitur nulla elit, imperdiet eu convallis adipiscing, hendrerit vel elit. Phasellus libero nulla, laoreet a blandit non, laoreet non ligula. In ligula tellus, pharetra ut condimentum a, hendrerit id dui. Maecenas ut mi lorem. Nullam quis ante tortor, et pulvinar magna. Morbi ultricies purus nec metus imperdiet fringilla. In non quam elit, at accumsan sem. Proin lectus nisi, scelerisque non ullamcorper ac, porta et nibh. Ut turpis justo, ultricies a hendrerit eu, faucibus vitae risus. Aliquam venenatis nibh ut dolor tristique sodales. Nam gravida iaculis ligula, quis lobortis turpis fermentum et. Nulla hendrerit urna eu tortor pellentesque a adipiscing arcu adipiscing. Maecenas et sapien eget est facilisis auctor. Aliquam venenatis, diam a cursus feugiat, lorem lorem porta turpis, quis lobortis lacus enim eu tortor. Nulla facilisi. Quisque est velit, sagittis ac commodo adipiscing, mattis in ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    		</div>
    		<div id="footer"></div>
    	</div><!--/page -->
    <script type="text/javascript" src="slider.php"></script>
    </body>
    </html>
    slider.php:
    Code:
    <?php
    
    echo '
    var NS6 = (document.getElementById&&!document.all);
    var IE = (document.all);
    var NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4");
    
    var yoffset=0;
    var lastY=0;
    var staticyoffset=160;
    
    
    if(NS6){
    	var menu=document.getElementById("bottom").style;
    }else if(IE){
    	var menu=document.all("bottom").style;
    }else if(NS){
    	var menu=document.layers["bottom1"];
    }
    
    menu.top = 0;
    
    function makeStatic(){	
    	if(NS||NS6){scrollstart = window.pageYOffset;}//The position of the top-left corner of the viewport (amount of scroll)...
    	if(IE){scrollstart = truebody().scrollTop;}
    
    	if(scrollstart!=lastY&&scrollstart>yoffset-staticyoffset){
    		smooth = .2 * (scrollstart - lastY - yoffset + staticyoffset);
    	}else if(yoffset-staticyoffset+lastY>yoffset-staticyoffset){
    		smooth = .2 * (scrollstart - lastY - (yoffset-(yoffset-scrollstart)));
    	}else{
    		smooth=0;
    	}
    	
    	if(smooth > 0){
    		smooth = Math.ceil(smooth);//rounds upward to nearest integer...
    	}else{
    		smooth = Math.floor(smooth);//rounds downward to nearest integer...
    	}
    	
    	if(NS6){menu.top=parseInt(menu.top)+smooth+"px";}//dynamic "top" value...
    	if(NS){menu.top=parseInt(menu.top)+smooth;}
    	if(IE){menu.pixelTop+=smooth;}
    	
    	lastY = lastY+smooth;//Prevents infinite slide-down...
    
    	document.getElementById(\'footer\').style.backgroundColor = "black";
    	document.getElementById(\'footer\').style.color = "white";
    	document.getElementById(\'footer\').innerHTML = "<p>scrollstart = "+scrollstart+" menu.top = "+menu.top+" lastY = "+lastY+" smooth = "+smooth+" yoffset = "+yoffset+" staticyoffset = "+staticyoffset+"</p>";
    
    	setTimeout(\'makeStatic()\', 1);
    };
    
    function truebody(){
    	return (document.compatMode!="BackCompat")? document.documentElement : document.body;//if transitional, then we use d.dEl... else use d.body...
    };
    
    makeStatic();';
    ?>

  2. #2
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This was either a hard one or a miscommunicated question (probably the latter, knowing me). Regardless, I found a solution to this and thought I would try to share...

    As I tried to explain above, a website that I'm currently throwing knives and sharp sticks at requires a menu that remains stationary up to a certain point (during a vertical scroll) where after it then hovers with the scroll. The solution to this boiled down to using some jquery--something I personally hate, but unfortunately, was forced to use...

    I'll pass on posting the contents of the "jquery-1.4.2.min.js" file but the complimentary file's contents can be found below:

    whatever.js:
    Code:
    $(function() {
    
    	var offset = $(".right").offset();
    	var topPadding = 0;
    	$(window).scroll(function() {
    		if ($(window).scrollTop() > offset.top) {
    			$(".right").stop().animate({
    				marginTop: $(window).scrollTop() - offset.top + topPadding
    			});
    		} else {
    			$(".right").stop().animate({
    				marginTop: 0
    			});
    		};
    	});
    });
    The class ".right" in the above code is the CSS class that all this crap targets. Just place that in whatever element you need to have hover (making sure that this element / div / whatever is absolutely positioned) and then scroll downward to get the final picture.

    Hopefully, you'll see that the menu remains stationary up to whatever point whereby it then hovers with your scroll. If it doesn't work, well, hopefully you'll accept my condolences.

    To that end, I hope this helps that one kid out there who's trying to meet the expectations of a calloused non-profit tyrant who expects the world for free despite knowing the volunteer's full-time class load and multiple jobs that all offer less than 10 hours a week worth of work...

    Heaven forbid we scroll back up to a menu...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •