Question

I’ve a function that scrolls my Index page to a specific anchor tag and changes the background image. The problem I have right now is that I need to use the links in my Menu page to move to the anchors in my Index page and change that background image. My Menu Page appears at the top of my index page.

The Javascript I have for scrolling inside my Index page is:

    $('-Button-to-scroll-is-clicked').click(function () {
        clearInterval(ID);
        $('html, body').animate({
            scrollTop: $('-Anchor').position().top
        },
        3000);
        var IntID = setInterval(changeImg, 1500);
        function changeImgHome() {
            $('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
        };
        ID = IntID;
        return false;
    });

The Javascript that I have for scrolling my index page from my Menu page is:

     $('-Button-In-Menu-Page').click(function () {
         $('html, body').animate({
             scrollTop: $('-Anchor-In-Index-Page').position().top
         },
         3000);
         return false;
     });

As I’ve said, I need to check in my Index page the position I’m at after scrolling (using the window.scroll function) so I can change the background image appropriately.

Answer 1

Well, first, position gathers the position of the element. By default, elements are placed inline and have a static position and no position coordinantes, so using .position().top will fail to yield the page position unless you’ve placed all of these things in absolutely.

That’s not a problem though, because we have .offset. Offset tells you the x and y positions of the target relative to the document, so we’ll use that.

Now our functions should look like this

window.onready = function(){
    $(-Button-to-scroll).on('click',function(){
       var itemPos = $('target').offset().top;
       $('body,html').animate({scrollTop:itemPos},3000);
       $('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
    }
}

EDIT: for your scrolling. This isn’t the most efficient way of doing it since it will basically keep rewriting your background image every time the user scrolls.

$('html').on('scroll',function(){
    var top = $(this).offset().top
    if ((top >= 200)||(top <= 300)){
        $('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
    }
});