Animate Scroll and Change Position with Jquery

After taking a look at David Walsh’s persistent header post, http://davidwalsh.name/persistent-header-opacity, I decided to change it up a bit. Now I probably won’t use this anytime soon in a big project or a smaller more personal one, but it’s still convenient technique to know, just in case I ever need to perform something to this sort.

 

Update: Tested in FireFox and works perfectly. IE, not so much. I’ll look into later and make additional edits where they need be.  Tested successfully in:

FireFox Icon

 

I like the idea of a persistent top menu bar, but the way I read most material online is from top to bottom and then left to right. Taking that into consideration, I decided I would need that top, stationary menu bar to move to the bottom.

 

Let’s take a look at the CSS and HTML.


 

     <div id="topbar">

 

        <a href="#top" class="link">Top of Page</a>

        <a href="#bottom" class="bottom">Bottom of Page</a>

</div>

 

 

    <div id="top">

<p>filler content should go in here.. just use lipsum.org</p>

        </div>

        <p id="bottom"></p>

<style type="text/css">

#topbar    {

border-bottom:1px solid #eb7429;

background:#F90;

padding:10px 20px;

position:fixed;

left:0;

z-index:2000;

width:100%;

}

.top{

top:0;

}

.notop{

bottom:0;

}

#top{

width:700px;

float:left;

}

</style>

 

Now the jQuery / JavsScript:

Keep in mind I am using the code from David’s tutorial also in mine, but I just made some changes to make it my own.

Also, you have to have the jQuery framework included too. If you get that little error saying “$ is undefined.”, you’re not including jQuery.

To start, here is David’s code for the fade in and fade out of the bar:

 

$(document).ready(function() {

(function() {

//settings

var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;

var topbarME = function() { $(‘#topbar’).fadeTo(fadeSpeed,3); }, topbarML = function() { $(‘#topbar’).fadeTo(fadeSpeed,fadeTo); };

var inside = false;

 

        $(window).scroll(function() {

position = $(window).scrollTop();

if(position > topDistance && !inside) {

//add events

topbarML();

$(‘#topbar’).bind(‘mouseenter’,topbarME);

$(‘#topbar’).bind(‘mouseleave’,topbarML);

inside = true;

}

else if (position < topDistance){

topbarME();

$(‘#topbar’).unbind(‘mouseenter’,topbarME);

$(‘#topbar’).unbind(‘mouseleave’,topbarML);

inside = false;

}

});

 

You’ll see that with only this, it performs with just the fade out if you’re not at the top.

Next we’re going to have to setup cookies using JavaScript to store the positions values of the bar.

I took examples from w3schools.com and altered them.

 

        //function to create a new cookie

function setCookie(name,position,expires){

var date=new Date();

date.setDate(date.getDate()+expires);

document.cookie=name+ “=” +escape(position)+ ((expires==null) ? “” : “;expires=”+date.toGMTString());

}

//function to get the cookie

function getCookie(cookie_name){

if (document.cookie) {

index = document.cookie.indexOf(cookie_name);

if (index != -1) {

namestart = (document.cookie.indexOf(“=”, index) + 1);

nameend = document.cookie.indexOf(‘;’, index);

if (nameend == -1) {

nameend = 0;

}

YouWrote = document.cookie.substring(namestart, nameend);

return YouWrote;

}

}

}

The function setCookie creates a new cookie with the name, position would be the value, and the time to expire as parameters. The getCookie function gets the value of the cookie from the cookie name. This may need to be altered in some cases where you aren’t storing any other cookies.

 

Next will be the click events for the links. These will ultimately create the basis for the cookies and animation and positioning.

        //click event to go to the top

$(‘.link’).click(function(){

$(‘html, body’).animate({scrollTop:$(‘#top’).offset().top}, 1500);

$(‘#topbar’).removeClass(‘notop’).addClass(‘top’);

setCookie(‘position’,’top’,2);

var newCookie = getCookie(‘position’);

});

//click event to go the bottom

$(‘.bottom’).click(function(){

$(‘html, body’).animate({scrollTop:$(‘#bottom’).offset().top}, 1500);

$(‘#topbar’).removeClass(‘top’).addClass(‘notop’);

setCookie(‘position’,’bottom’,2);

var newCookie = getCookie(‘position’);

});

 

The events and methods that are taking place are pretty much self explanatory, with the console.log() for error checking.

 

Finally, we have to check the value of the cookie on page load/refresh and perform the needed code.

 

        //for refreshing of the page, check to see if the cookie is set

var Cookie = getCookie(‘position’);

if(Cookie==’top’){

$(‘#topbar’).removeClass(‘notop’).addClass(‘top’);

}

else if(Cookie==’bottom’){

$(‘#topbar’).removeClass(‘top’).addClass(‘notop’);

$(‘html, body’).animate({scrollTop:$(‘#bottom’).offset().top}, 1500);

}

if(typeof(Cookie)==”undefined”){

$(‘#topbar’).removeClass(‘notop’).addClass(‘top’);

}

 

Again, pretty basic events occuring here. With mine, if the cooke equals bottom, I’m actually scrolling to the bottom of the page.

 

If you’re wondering what you could use this for, I’ve come up with a couple of good examples.

  • Smooth scrolling through long content documents. This could be really useful and creative for an online resume. You could have the topics on the toolbar and just click to go to that topic.
  • The same could go for a small community where you can loop through the unique members or data and display them as links on the toolbar. Then you could use those ids from the db and throw them in the id of the div and you’ve got yourself an extra DHTML feature.

It’s also not necessary to change the position of the toolbar from top to bottom, so if you like it just on the top, keep it on the top.

 

You can see the live demo here:

 

jquery-animate-demo2.png

Leave a Reply

Your email address will not be published. Required fields are marked *