I am trying to get a div to scroll up at the same amount of pixels as the user scrolls down the page. For example, in Google Chrome when using the mouse wheel, it scrolls down in about 20px intervals. But when you scroll down using the handle, the scrolling amount varies.

Here is my code so far:

var scrollCtr = 50;
$(window).scroll(function(){
   scrollCtr = scrollCtr - 20;
   $('div.nexus-files').css('margin-top', scrollCtr + 'px');
});

There are a few problems with this:

1. The user scrolling varies
2. It needs to subtract from margin-top if scrolling down and add to margin-top if scrolling up

Here is an example: /

Thanks for the help

I am trying to get a div to scroll up at the same amount of pixels as the user scrolls down the page. For example, in Google Chrome when using the mouse wheel, it scrolls down in about 20px intervals. But when you scroll down using the handle, the scrolling amount varies.

Here is my code so far:

var scrollCtr = 50;
$(window).scroll(function(){
   scrollCtr = scrollCtr - 20;
   $('div.nexus-files').css('margin-top', scrollCtr + 'px');
});

There are a few problems with this:

1. The user scrolling varies
2. It needs to subtract from margin-top if scrolling down and add to margin-top if scrolling up

Here is an example: http://www.enflick./

Thanks for the help

• javascript
• jquery
• css

• 1 How about CSS, position: fixed? What's this for? – elclanrs Commented Apr 27, 2013 at 22:10
• Here is what I am trying to do: enflick. – Olokoo Commented Apr 27, 2013 at 22:19
• see my answer below - about the position:fixed solution - and learn how to use firebug/Chrome developer tools - it could have save you the effort of asking this question – Yaron U. Commented Apr 27, 2013 at 22:23

3 Answers 3

You're doing it the wrong way, what you are trying to do should be done using position: fixed on div.nexus-files

div.nexus-files{position: fixed; top: 0;}

but anyway - if you still want to know what you can do with the scroll event - you better get to scrollTop of the document and set the margin-top to the same value

window.onscroll = function(event){
    var doc = document.documentElement, body = document.body;
    var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);
    document.getElementById('nexus-files_id').style.marginTop = top+'px';
}

I'm using pure Javascript instead of jQuery because of the overhead that might be crucial when the browser need to calculate stuff in a very short amount of time (during the scrolling). [this can be done even more efficient by storing reference to the element and the doc... but you know..)

I used id based selector to get the specific element instead of class based

AND I SAY AGAIN - this is not how you should do what you were trying to do

Why not using the actual scroll offset as reference or position ?

// or whatever offset you need
var scrollOffset = document.body.scrollTop + 20;

// jQuery
var scrollOffset = $("body").scrollTop() + 20;

Finally Got it

Here is the code I used to acplish the task.

Most of the code is from http://enflick. and I modified it to work with my individual situation.

jQuery(window).load(function(){
initParallax();
});

// parallax init
function initParallax(){
var win = jQuery(window);
var wrapper = jQuery('#wrapper');
var bg1 = wrapper.find('.nexus-files');
var koeff = 0.55;
if (bg1.length) {
    function refreshPosition(){
        var scrolled = win.scrollTop();
        var maxOffsetY1 = 450;
        var offsetY1 = scrolled * koeff;
        var offsetY2 = scrolled * koeff - (maxOffsetY1 * koeff - offsetY1);
        if (offsetY1 <= maxOffsetY1 * koeff - offsetY1) {
            bg1.css("margin-top", +-offsetY1+"px");
            //alert(+-offsetY1+"px");
        }
    }
    refreshPosition();
    win.bind('resize scroll', refreshPosition);
}
}