How to calculate horizontal scrolling position

Question

I have made a horizontal scrolling website. The main problem is that I am not able to highlight the active menu item when loading for the first time or refreshing.

I also can't keep the active link permanently on home. Because if users will refresh the page while active on other page, the home page will get highlighted. My website is similar to this one: something like this website

Answer 1

If you're using jQuery, you can use .scrollLeft() to get the horizontal scroll of the page, in pixels.

Like so:

$(window).scroll(function() {
    var scroll = $('html, body').scrollLeft();
    // do stuff with the value...
});

Answer 2

check this out...http://jsfiddle.net/aGCVt/2/

You can also use document.getElementById('container').scrollLeft = YOUR PAGE WIDTH;

HTML

<button onclick="gotoPage(0)">First</button>
    <button onclick="gotoPage(1)">Second</button>
    <button onclick="gotoPage(2)">Third</button>
    <div style="white-space: nowrap; overflow: auto; width: 500px;height: 300px;" id="container">
        <div id="firstPage" class="common"></div>
        <div id="secondPage" class="common"></div>
        <div id="thirdPage" class="common"></div>
    </div>

CSS

.common {
    width: 500px;
    height: 300px;
    display: inline-block;
}

#firstPage {

    background-color: red;
}

#secondPage {
    background-color: yellow;
}

#thirdPage {
    background-color: green;
}

JAVASCRIPT

function gotoPage(pageNo) {
    var scroll = 500 * pageNo;
    document.getElementById('container').scrollLeft = scroll;
}

you can also use jquery $('#container').scrollLeft().