Proper window resizing of full width and for responsive website

问题

I have an issue with this website when resizing the window: http://goo.gl/BaIuy

Let me try to explain. I'm trying to achieve the experience of being in a fishbowl as you can see. It's made with 4 different containers, one for the water background, one for the content, another for the fish images and the last one for the graphic objects like the driftwood and seaweed.

Each container, except the one for the water background, have a main <ul id="mask"> that is 600% wider than the window size. This ul#mask contains six <li> elements that correspond to each one of the sections of the website and have a width of 100% of the window size each one.

<ul id="mask">
    <li id="home" class="box"></li> 
    <li id="about" class="box"></li>    
    <li id="services" class="box"></li> 
    <li id="clients" class="box"></li>  
    <li id="give" class="box"></li>
    <li id="contact" class="box"></div></li>
</ul>

#mask {
    float: left;
    padding: 0;
    width: 600%;
}

#mask > li {
    float: left;
    list-style: none;
    width: 16.66666666%;
}

The problem is that when you are positioned on a section different from the first one (first <li id="home">) and resize the window all <li> elements start to decrease their width but the current <li> doesn't full the window size any more and other <li> elements start appearing in the screen due the resizing action.

I already tried to give the resized width to elements by calculating the width with javascript and deactivated the width of elements in the stylesheet so the javascript does it giving it the window width when page has been loaded., but it seems something is missing or I'm doing something wrong, take a look here:

    $(function () {
    $('.header').fadeIn(1600);
    $('.mainWrapper ul#mask').fadeIn(4000);
    $('.secondLayer ul#mask').fadeIn(4000);
    $('.thirdLayer ul#mask').fadeIn(4000);

        $('ul#mask').css({width: '600%'});
        $('ul#mask li').css({width: '16.66666666%'});

        $(window).resize(function() {
            var viewPortSize = $(window).width();
            var maskSize = parseInt(viewPortSize)*6
            var maskLiSize = parseInt(maskSize)/6

            $('ul#mask').width(maskSize);
            $('ul#mask li').width(maskLiSize);
        });
    });

#mask {
    display: none;
    float: left;
    padding: 0;
    /* width: 600%; */
}

#mask > li {
    float: left;
    list-style: none;
    /* width: 16.66666666%; */
}

I hope someone can help and appreciate your time to take a look at this.

回答1:

Update the scroll position when the browser is resized

When the browser is resized, the horizontal scroll positions of the containers aren't getting updated. Given that the widths of the elements have changed, and given that the page may have switched to a different layout via the @media queries, the previous horizontal scroll positions are no longer valid and need to be updated.

After the resize, each container should be scrolled instantaneously to the correct scroll position, as if the user had re-clicked on the current navigation element (except that the scroll operation should be performed with a duration of 0 msec).

I'm not sure if this alone will entirely fix the problem. At worst, this is a separate issue that needs to be addressed as well.