CODEWITHSUNDEEP
javascriptjquerycss
TheCarver
TheCarver

Reputation: 19713

JQuery/CSS - Floating Column Menu

I have a floating column menu on my page, it works and looks great but I need to modify it a little but can't work out how.

The script is:

var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
    $(window).scroll(function () { 
        offset = menuYloc+$(document).scrollTop()+"px";
        $(name).animate({top:offset},{duration:1000,queue:false});
    });
});

The CSS for the element '#floatMenu' is:

#floatMenu { position:relative; width:285px; top:0px; left:0px; }

Currently, as I scroll down the page, 1 second later the menu chases me down the page but stops when it reaches, in pixels, the distance the element was from the top of the window originally. For example, on page load, the floating element is say, 308px away from the top. When I start to scroll down, the floating element stays 308px from the top at all times.

Is it possible to modify this script, so the floating menu is always 20px from the top of my window when I scroll down?

Upvotes: 0

Views: 840

Answers (1)

Blazemonger
Blazemonger

Reputation: 92903

See http://jsfiddle.net/mblase75/uEkSq/4/

I added some code that computes whether floatMenu's default position is larger than the scrollTop.

var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function() {
    menuYloc = $("#floatMenu").offset().top;
    $(window).scroll(function() {
        offset = Math.max(menuYloc,$(document).scrollTop()+20);
        $(name).animate({
            top: offset
        }, {
            duration: 1000,
            queue: false
        });
    });
});

Upvotes: 1

Related Questions