Change only y-position in background while scrolling

Question

Possible Duplicate:
Changing only y pos of background image via Jquery

I want to change only y-position of backournd of .nav-logo while scrolling and keeping x-position consant. I have implemented like this but doesnot get result. Here is my usage code

jQuery(document).ready(function($) {
a=parseFloat(-28);// valor inccial para el background 1
b=parseFloat(1);// valor inccial para el background 1

var scrollTop = $(window).scrollTop();          
var scroll_actually= new Array();// identifica los valoares del background X y  Y

$(window).scroll(function(){//this is not the cleanest way to do this, I'm just keeping it short.
    if(scrollTop>$(this).scrollTop()) // desplazamiento hacia arriba
    {
        if (getScrollTop()<=100 && getScrollTop()>=0)// identyifica cuando la posicion del background_1 esta en scroll
        {
                a=a+1;// posicion del background1 decrementa en 1 pixeles
                b=b+1;// posicion de background1 decrementa en 1 pizeles 
                $('a.qa-logo-link').css('top', +a+'px');
                $('.nav-logo a').css('background-position', -1+'px' , 0+b+'px');    // i think something is wrong here  
        }

    }scrollTop = $(this).scrollTop();});
});
function getScrollTop(){ 



   if(typeof pageYOffset!= 'undefined'){
        //most browsers
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

my css file is

.nav-logo a{
background:url("logo1.png") no-repeat scroll  transparent;
background-position:-1px 1px;}

Chamika Sandamal · Accepted Answer · 2011-10-15T10:35:44.677

0

if you want to keep .nav-logo in a static position, use css position:fixed; or position:absolute; and give a left and top values.

UPDATE

updated your sample

http://jsfiddle.net/SbuxT/9/

edited Oct 15 '11 at 10:35

answered Oct 15 '11 at 08:55

Chamika Sandamal

23,565
5
63
86

I want to keep position-x fixed and change the y position of .navlogo bakground while scrolling . – Rajul Oct 15 '11 at 09:00
is that mean always visible logo? – Chamika Sandamal Oct 15 '11 at 09:01
actually i want to make logo move upward while scrolling browser bar and yes i want to make visible always . i just getting some random positioning with above code while scrolling . – Rajul Oct 15 '11 at 09:09
is this what you want? http://jsfiddle.net/SbuxT/ – Chamika Sandamal Oct 15 '11 at 09:43
no , in your above link logo is at fixed position but i want movement of logo in y-axis while scolling down. – Rajul Oct 15 '11 at 10:04
ok. if log is at the top when the scroll to top, where it should be when scroll to bottom? – Chamika Sandamal Oct 15 '11 at 10:15
see this link http://jsfiddle.net/SbuxT/6/ when you scroll down logo is moving in x-direction but i want it to move in y-direction not in x-direction , i am facing problem in moving in y-direction.are you getting me now? – Rajul Oct 15 '11 at 10:20
http://jsfiddle.net/SbuxT/8/ is this ok? – Chamika Sandamal Oct 15 '11 at 10:28
http://jsfiddle.net/SbuxT/9/ updated your sample – Chamika Sandamal Oct 15 '11 at 10:35
yes , i know this implementation but i just want to know how to change y coordinate of "background image" as you see in my example logo-image is perfectly moving in x direcion but how to move that logo in y - direction . Thanks for you effort. – Rajul Oct 15 '11 at 10:36
jsfiddle.net/SbuxT/9 will perfectly moving in y direction. – Chamika Sandamal Oct 15 '11 at 10:39

Change only y-position in background while scrolling

1 Answers1