I am trying to have a sidebar menu scroll. I seem to call the javascript correctly but I cannot get it to scroll at all.
I want the menu to fix to the affixed menu and I want to have smooth scroll.
Here is my html:
<div class="container">
<div class="row">
<div class="col-md-3 practoreint" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li><b>EndoBalance Software</b></li>
<ul>
<li>Features</li>
<li>Benefits</li>
<li>Costs</li>
</ul>
<li><b>Continuing Education</b></li>
<ul>
<li>Webinars</li>
<li>Case Review Sessions</li>
<li>Networking Meetups</li>
<li>Certification Courses</li>
<li>Continuing Education Costs</li>
</ul>
<li><b>Practitioner Development</b></li>
<ul>
<li>Outside Network Referral</li>
<li>Wellness Network Provider</li>
<li>Certified Wellness Practitioner</li>
<ul>
<li>Level 1 Certification</li>
<li>Level 2 Certification</li>
<li>Level 3 Certification</li>
<li>Level 4 Certification</li>
</ul>
</ul>
<li><b>Student Educational Development</b></li>
<li><b>HIPPA and Privacy</b></li>
</ul>
</div>
<div class="col-md-9">
<p>This section describes the wellness software program, professional education system, practitioner corporate opportunity, student development and HIPPA privacy. We welcome questions and feedback on this content.</p>
<hr class="col-md-12">
<a class="anchor3" id="top" name="software"></a>
<h2 style="font-weight:bold;">Software</h2>
Here is the css:
.affix-top,.affix {
position: static;
}
#media (min-width: 979px) {
#sidebar.affix-top {
position: static;
margin-top: 30px;
width: 228px;
}
#sidebar.affix {
position: fixed;
top: 70px;
width: 228px;
}
}
#sidebar li.active {
border: 0 #eee solid;
border-right-width: 4px;
}
Here is the java:
/*!
* JS Scripts
*/
// Placeholder
$('#sidebar').affix({
offset: {
top: 235
}
});
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
Here is the fixed navbar scrolling with page answer:
http://bootply.com/104641
Related
I'm trying to make a sticky navbar that becomes fixed after scrolling past the hero section. I'm trying to use materialize to do this, but I'm not very good at javascript so I can't figure it out. I'm trying to use Materialize Pushpin to do it (http://materializecss.com/pushpin.html)
Here's my code so far: https://jsfiddle.net/2kc0fgj5/
The part I'm trying to make sticky is the .menu div. What would be the method I would use javascript I would use to make the navbar behave this way?
<head>
<title>Voice</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<section id="hero" class="segment">
<div id="hero-content" class="valign-wrapper">
<div id="hero-child" class="center-align">
<img src="resources/images/voice-circle.png" id="voice-circle" /><br/>
Learn More<br/>
Order Now
</div>
</div>
</section>
<div class="menu">
<nav>
<div class="nav-wrapper white">
Voice
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Features</li>
<li>Testimonials</li>
<li>Workshops</li>
<li>Prices</li>
</ul>
</div>
</nav>
</div>
<section id="features" class="segment">
</section>
</body>
The accompanying CSS:
.segment {
height: 100vh;
width: 100%;
background-color:aquamarine;
}
.divide {
height: 50vh;
width: 100%;
}
#hero {
background-image: url('resources/images/hero%20header.png');
background-size: auto 100vh;
background-position: center;
}
.bpblue-text {
color: #21A1EC;
}
#nav-mobile>li>a {
color: #21A1EC;
}
#voice-circle {
width: 30%;
height: auto;
}
.hero-btn {
margin: 10px;
width: 300px;
}
#hero-content {
width: 100%;
height: 100vh;
}
#hero-child {
width: 100%;
}
And the current javascript, so far only having smooth scrolling and a side navigation bar
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function () {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
$(".button-collapse").sideNav();
EDIT: fixed link and added code.
You Need some Fixes in HTML and JS
HTML
change this section line 20 and 21
<div class="menu">
<nav>
to
<div id="menu">
<nav class="menu" data-target="menu">
JS
$(document).ready(function () {
var menu = $('.menu');
var target = $('#' +menu.attr("data-target"));
menu.pushpin({
top: target.offset().top,
});
});
Working Fiddle
Hope this Helps..
you can add this to your js file
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150){
$('nav').addClass('sticky-nav');
}
});
)};
and this to CSS file
.sticky-nav{
position: fixed;
top:0;
}
My goal is for an image inside of a div to get smaller when you scroll down in that div. I made a working example of it in the body but not in a div.
https://jsfiddle.net/53u2e86m/
HTML:
<div class="header">
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/2000px-LEGO_logo.svg.png" id="logo">
</div>
<br>
<br>
<br>
<!-- more brs ... -->
The CSS
body {
text-align: center;
}
.header {
width: 100%;
padding: 10px 0;
text-align: center;
}
#logo {
height: 300px;
-webkit-transition: height .5s;
transition: height .5s;
}
And the JS
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 25,
logo = document.getElementById("logo");
if (distanceY > shrinkOn) {
logo.style.height="150px";
} else {
if (distanceY < shrinkOn) {
logo.style.height="300px";
}
}
});
}
window.onload = init();
Now I wanted to implement this in my project and I am using the mdl framework. The problem is that when I put this in the main div holder (the <div class="mdl-layout mdl-js-layout"> one) the body doesn't scroll at all. The reason why is because the main mdl div is just as big as your screen and no bigger and its contents scroll. So I tried to set the scroll event listeners to the div but nothing worked. Here is my HTML:
<!-- START OF MAIN DIV -->
<div id="mainDiv" class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button">
<!-- header -->
<div class="header">
<img id="logo" src="pic/logo.png" alt="logo">
</div>
<header class="mdl-layout__header mdl-layout__header--transparent ">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Comments</a>
<a class="mdl-navigation__link" href="#">Pictures</a>
<a class="mdl-navigation__link" href="#">Activities</a>
</nav>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">Website</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Comments</a>
<a class="mdl-navigation__link" href="#">Pictures</a>
<a class="mdl-navigation__link" href="#">Activities</a>
</nav>
</div>
<br>
<br>
<br>
<br>
<!-- lots more <br> -->
</div>
<!-- END OF MAIN DIV -->
Here is my CSS
.header {
width: 100%;
padding: 10px 0;
text-align: center;
}
#logo {
height: 150px;
-webkit-transition: height .5s;
transition: height .5s;
}
And my JS
mainDiv.onload=function(){
var mainDiv = document.getElementById("mainDiv");
function init() {
mainDiv.addEventListener('scroll', function(e){
var distanceY = mainDiv.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 25,
logo = document.getElementById("logo");
if (distanceY > shrinkOn) {
logo.style.height="150px";
} else {
if (distanceY < shrinkOn) {
logo.style.height="300px";
}
}
});
}
mainDiv.onload = init();
}
I just doesn't work and I get an error saying:
Uncaught ReferenceError: mainDiv is not defined(anonymous function) # main.js:2
I've gotten very frustrated cause I've searched every where and I still can't get it to work. Any help would be appreciated.
Edit: JSFiddle of the not working one https://jsfiddle.net/fe04kLf0/4/ .
There is a menu button on the left of my site in progress.
This is the Javascript code which opens the menu:
var main = function()
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 400);
$('body').animate({
left: "285px"
}, 400);
});
And this is the Javascript code which closes the menu:
$('.icon-close').click(function () {
$('.menu').animate({
left: "-285px"
}, 400);
$('body').animate({
left: "0px"
}, 400);
});
What I would like to be able to do is, instead of using a "close" icon, I would like for a click anywhere on the page (including the original menu button) to close the menu.
As the code is currently written, when the menu is opened/closed, it slides in from the left, and the main body of the page slides to the right the same amount of pixels, and vice-versa when closed.
EDIT:
Here's the skeleton of the HTML as requested:
<div class="menu">
<div class="icon-close">
<img src="close.png">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div class="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>Menu
</div>
</div>
You can capture a document.onclick event then check the event target id against a set of allowed id's Note that to do this you have to add id attributes to the close button and the "body". I've also taken the liberty of adding an id to the menu and a wrapper around the "body" of the document and changed your body tag animation to that wrapper, as you shouldnt move the body tag directly. Note that to resize the body on menu open just change the body position: absolute and set right: 0px;
(Demo keep body size on menu open)
(Demo resize body to keep within viewport on menu open)
$(document).on('click', function(e) {
if ($("#menu").position().left != '0') {
if (e.target.id === "open") {
$('#menu').animate({
left: "0px"
}, 400);
$('#body').animate({
left: "285px"
}, 400);
}
} else {
if (e.target.id === "body" || e.target.id === "close" || e.target.id === "open") {
$('#menu').animate({
left: "-285px"
}, 400);
$('#body').animate({
left: "0px"
}, 400);
}
}
});
html, body, #menu, #body {
height: 100%;
}
.menu {
position: absolute;
width: 285px;
left: -285px;
}
#body {
position: relative;
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu" id="menu">
<div class="icon-close">
<img src="close.png" id="close">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div id="body">
<div class="jumbotron">
<div class="icon-menu" id="open">
<i class="fa fa-bars" id="open"></i>Menu
</div>
</div>
</div>
Pure JS and CSS
The following is a pure javascript and css method for achieving the same effect. I'm including this for reference as it is a lot lighter weight than including jquery, however if you have jquery included already there is no reason to not use the jquery methods. Notice that on older browsers that do not support css transitions the menu will still open but will not be animated (which is a good thing for older browsers as javascript animations can slow things down quite a bit)
(Demo keep body size on menu open)
(Demo resize body to keep within viewport on menu open)
var menu = document.getElementById("menu");
var body = document.getElementById("body");
menu.style.transition = "0.3s linear";
body.style.transition = "0.3s linear";
document.onclick = function(e) {
if (menu.style.left != "0px") {
if (e.target.id === "open") {
menu.style.left = "0px";
body.style.left = "285px";
}
} else {
if (e.target.id === "body" || e.target.id === "close" || e.target.id === "open") {
menu.style.left = "-285px";
body.style.left = "0px";
}
}
};
html, body, #menu, #body {
height: 100%;
}
.menu {
position: absolute;
width: 285px;
left: -285px;
}
#body {
position: relative;
left: 0px;
}
<div class="menu" id="menu">
<div class="icon-close">
<img src="close.png" id="close">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div id="body">
<div class="jumbotron">
<div class="icon-menu" id="open">
<i class="fa fa-bars" id="open"></i>Menu
</div>
</div>
</div>
Here's humble's version of the snippet below:
http://jsfiddle.net/humbleRumble/3j7s9ggz/
You can just bind a click event to the document that does the same thing as the click on the close button:
$(document).on('click', function (e) {
// Filter some elements out so that this function doesn't
// execute when it's not intended to.
var target = e.target,
isMenuElem = $(target).parents('.menu').length || $(target).is('.menu'),
isMenuClose = $('.icon-close').has(target).length,
isIconMenu = $(target).is('.icon-menu');
// Simply return if the clicked element falls under the filter.
// This allows the close button to close,
// the menu to not close itself if you click its body,
// the function to not interfere with the menu button functionality,
// and that a click on anywhere will close the menu.
if (isMenuElem && !isMenuClose || isIconMenu) return;
$('.menu, #jumbotron').animate({
left: "-285px"
}, 400);
});
$('.icon-menu').click(function () {
// This is a 'toggle' value for left,
// if the menu is opened (left: 0), close it (left: -285)
// and vice-versa.
var toggleAnim = $('.menu').css('left') === '-285px' ? 0 : '-285px';
$('.menu, #jumbotron').animate({
// Apply the toggle
left: toggleAnim
}, 400);
});
html, body {
padding: 0;
margin: 0;
}
#jumbotron {
position: relative;
height: 500px;
width: 300px;
float: left;
}
.menu {
position: relative;
width: 285px;
height: 500px;
background: red;
float: left;
}
.icon-menu {
background: black;
color: #fff;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<div class="icon-close">
<img src="close.png" alt="Close Me">
</div>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>Locations
</li>
<li>Contact Us
</li>
</ul>
</div>
<div class="jumbotron" id="jumbotron">
<div class="icon-menu">
<i class="fa fa-bars"></i>Menu
</div>
</div>
This will trigger with a click anywhere on the page, but not on the elements inside of the menu (except the close button).
I'm trying to figure out how I can add transition on my website when user clicks on an anchor tag/link going to the specific div or part of the website. Sorry for my bad english.
I added the javascript on my website but it still scrolls instantly on to the specific div with no transition
Here is my work in progress.
HTML
<!--NAVIGATION -->
<div class="sidebar">
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!--CONTENT -->
<div class="content">
<div id="home" class="munla-slides home-slide"></div>
<div id="menu" class="munla-slides menu-slide"></div>
<div id="gallery" class="munla-slides gallery-slide"></div>
<div id="contact" class="munla-slides contact-slide"></div>
</div>
CSS
*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
html, body{height:100%; overflow:hidden}
.sidebar{
width:20%;
float:left;
height:100%;
background-color:beige
}
.content{
width:80%;
float:left;
height:100%;
background-color:teal;
overflow:hidden
}
.munla-slides{height:100%; width:100%; overflow-x:hidden}
.munla-slides .box1{height:500px; width:300px; background-color:grey}
.home-slide{background-color:#774040}
.menu-slide{background-color:#17D8C5}
.gallery-slide{background-color:#F96327}
.contact-slide{background-color:#D34593}
JAVASCRIPT
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
I was wondering if someone could give me a solution.
I have a website that scrolls horizontally. I divided it in six sections being the first section the home page. This home page features a navigation system different to the rest of sections for which I used a standard horizontal nav bar.
My problem is that I need the nav bar to stay fixed on its position so when I scroll down, it's still there but I don't want this nav bar to show on the home screen. Is there anyway I can have the nav bar fixed on different sections of the site while is hidden on the homepage?
Any help will be much appreciated. I attach the fiddle: http://jsfiddle.net/zpeua/
Many thanks guys!
Gon
HTML
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div id="Header" class="effect2">
<div id="Logo"></div>
<div id="ContactDetails"></div>
</div>
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item1"></a>
<div class="content"></div>
</div>
<div id="item2" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item2"></a>
<div class="content"></div>
</div>
<div id="item3" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item3"></a>
<div class="content"></div>
</div>
<div id="item4" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item4"></a>
<div class="content"></div>
</div>
<div id="item5" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item5"></a>
<div class="content"></div>
</div>
<div id="item6" class="item">
<div id="nav" class="Home">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Events
</li>
<li>Repertoire
</li>
<li>Media
</li>
<li>Contact
</li>
</ul>
</div> <a name="item6"></a>
<div class="content"></div>
</div>
</div>
CSS
body {
height:100%;
width:100%;
margin:0;
padding:0;
overflow:hidden;
text-align:center;
}
#wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
}
#Header {
position:fixed;
z-index:10;
width:100%;
text-align:center;
padding:33px 0;
background:#FFF;
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.3);
overflow:auto;
}
#nav {
width:100%;
position:absolute;
top:127px;
text-align:center;
background:#FFF;
z-index:999;
padding-top:7px;
}
#nav ul {
width:100%;
max-width:1015px;
margin:0 auto;
list-style:none;
display:inline-block;
}
#nav ul li {
float:left;
width:auto;
margin:0 60px 0 60px;
}
#nav li a {
color:#999;
}
#nav li a:hover {
color:#000;
}
#mask {
width:600%;
height:100%;
background-color:#fff;
}
.item {
width:16.6%;
height:100%;
overflow-y:scroll;
float:left;
background-color:#fff;
}
.content {
width:100%;
height:100%;
top:165px;
margin:0 auto;
background-color:#fff;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
JS
$(document).ready(function () {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({
width: width,
height: height
});
$('#mask').css({
width: mask_width,
height: height
});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
;(function( $ ){
var $scrollTo = $.scrollTo = function( target, duration, settings ){
$(window).scrollTo( target, duration, settings );
};
$scrollTo.defaults = {
axis:'xy',
duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
};
// Returns the element that needs to be animated to scroll the window.
// Kept for backwards compatibility (specially for localScroll & serialScroll)
$scrollTo.window = function( scope ){
return $(window)._scrollable();
};
// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
return this.map(function(){
var elem = this,
isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if( !isWin )
return elem;
var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
return $.browser.safari || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
};
$.fn.scrollTo = function( target, duration, settings ){
if( typeof duration == 'object' ){
settings = duration;
duration = 0;
}
if( typeof settings == 'function' )
settings = { onAfter:settings };
if( target == 'max' )
target = 9e9;
settings = $.extend( {}, $scrollTo.defaults, settings );
// Speed is still recognized for backwards compatibility
duration = duration || settings.speed || settings.duration;
// Make sure the settings are given right
settings.queue = settings.queue && settings.axis.length > 1;
if( settings.queue )
// Let's keep the overall duration
duration /= 2;
settings.offset = both( settings.offset );
settings.over = both( settings.over );
return this._scrollable().each(function(){
var elem = this,
$elem = $(elem),
targ = target, toff, attr = {},
win = $elem.is('html,body');
switch( typeof targ ){
// A number will pass the regex
case 'number':
case 'string':
if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
targ = both( targ );
// We are done
break;
}
// Relative selector, no break!
targ = $(targ,this);
case 'object':
// DOMElement / jQuery
if( targ.is || targ.style )
// Get the real position of the target
toff = (targ = $(targ)).offset();
}
$.each( settings.axis.split(''), function( i, axis ){
var Pos = axis == 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
old = elem[key],
max = $scrollTo.max(elem, axis);
if( toff ){// jQuery / DOMElement
attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
// If it's a dom element, reduce the margin
if( settings.margin ){
attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
}
attr[key] += settings.offset[pos] || 0;
if( settings.over[pos] )
// Scroll to a fraction of its width/height
attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
}else{
var val = targ[pos];
// Handle percentage values
attr[key] = val.slice && val.slice(-1) == '%' ?
parseFloat(val) / 100 * max
: val;
}
// Number or 'number'
if( /^\d+$/.test(attr[key]) )
// Check the limits
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
// Queueing axes
if( !i && settings.queue ){
// Don't waste time animating, if there's no need.
if( old != attr[key] )
// Intermediate animation
animate( settings.onAfterFirst );
// Don't animate this axis again in the next iteration.
delete attr[key];
}
});
animate( settings.onAfter );
function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target, settings);
});
};
}).end();
};
// Max scrolling position, works on quirks mode
// It only fails (not too badly) on IE, quirks mode.
$scrollTo.max = function( elem, axis ){
var Dim = axis == 'x' ? 'Width' : 'Height',
scroll = 'scroll'+Dim;
if( !$(elem).is('html,body') )
return elem[scroll] - $(elem)[Dim.toLowerCase()]();
var size = 'client' + Dim,
html = elem.ownerDocument.documentElement,
body = elem.ownerDocument.body;
return Math.max( html[scroll], body[scroll] )
- Math.min( html[size] , body[size] );
};
function both( val ){
return typeof val == 'object' ? val : { top:val, left:val };
};
})( jQuery );
You can easily fix the header to the top of the page and use jQuery to detect what page you're on within $(document).ready() and hide the header when you are on the home page. So within your $('a.panel').click() you'll just need this:
if($(this).html() == 'Home' && !$('#HomeNavId').is(':visible'))
{
$('#HomeNavId').show();
} else {
$('#HomeNavId').hide();
}