Hi there,
I am building a site that employs smooth anchor scrolling. I added a .default div 640px menu that starts out below the logo and as you scroll up fades into a stay on top menu with a .fixed div 100% width.
Stay on top demo I used:
http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/nagging-menu-with-css3-and-jquery/index.html
When I click a link while the menu is in the fixed div state the link scrolls to its proper place, 60px from top. But if I click a link while it is in .default div state it scrolls up all the way to the top and is obscured by the menu that has changed to it’s fixed state. I have tweaked the css to no avail and think it is a javascript issue since the smooth-scroll script is from a different place than the stay on top script.
For reference here is the smooth script:
$(document).ready(function() {
// Click event for any anchor tag that's href starts with #
$('a[href^="#"]').click(function(event) {
// The id of the section we want to go to.
var id = $(this).attr("href");
// An offset to push the content down from the top.
var offset = 60;
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;
// The magic...smooth scrollin' goodness.
$('html, body').animate({scrollTop:target}, 500);
//prevent the page from jumping down to our section.
event.preventDefault();
});
});
Here is the stay on top script:
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
Here is some sample html:
<nav id="menu" class="default">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#abouts">About</a></li>
<li><a href="#contacts">Contact</a></li>
</ul>
</nav>
<div class="container">
<section id="intro" class="section">
<h2>Hi There</h2>
<p>My name is Derek Fitzer. I am an independent web developer living in San Francisco, CA. When creating web content I start with the needs of the customer and create clean, modern code as the base, this in turn informs the layout and overall user experience. Though my primary emphasis is on web development I am also adept at helping create compelling content.</p>
</section>
<section id="portfolio" class="section">
<h2 id="portfolio">Portfolio</h2>
<p>When creating a site I taken into account the subject matter I am dealing with, here are some examples of my work.</p>
<div class="section">
<h2 id="cab">Cab</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
</div>
</div>
And Css:
.default {
width: 640px;
height: 40px;
}
.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
}
This is my first foray into actually employing javascript on a site and any input will be of great help. This is also my first post and would like to say hi to all that come across this question and look forward to eventually being a source of knowledge for others in the near future.
I don’t have wifi at home and won’t be able to see if there are any responses until tomorrow but will diligently employ any suggestions or answer any questions that might be posed.
Cheers