1

I have a similar problem and situation to the one answered in this thread: one page horizontal site not centered on resize, although I can't seem to get that solution to work for me.

I'm just learning javascript/jQuery and adding some basic responsive-ness, so it's a wonder that I have a working site at all. It's my first horizontal scrolling one-page site and somehow (magically, to me) I've gotten scrollTo and localScroll up and running, but I'd like to see the content remain centered on resize. If you're on the first slide with the image, it remains centered - but if you're on any other slide (credits/reel/contact) the widths all change and move around.

Take a look at http://dianeajax.maxsitedesign.com

I should mention it's running on Wordpress, in case that changes the answers. Please let me know if anything is unclear or if I should paste code somewhere; as I said I'm aware that I don't really know what I'm doing. Be kind. :)

4

1 回答 1

0

为了后代：

资产净值的 JS

$('.main-nav-link').click(function(e) {
    e.preventDefault();
    var toTarget = $(this).attr('href');
    history.pushState(null, null, toTarget);
    $(window).triggerHandler('hashchange');
});

$(window).on('hashchange', function () {
    if(!window.location.hash) return;
    var $target = $(window.location.hash);
    $('html, body').stop(true,false).animate({
        scrollLeft: $target.offset().left}, 900, function() {
            $(this).stop(true,false).animate({scrollTop:0})
        });
});

用于调整大小的 JS

$(window).resize(function() {
    var stayHere = $(window.location.hash);
    $('html, body').stop(true,false).scrollLeft( stayHere.offset().left );
});

关于所使用的 CSS/HTML 的其他信息：水平单页网站不会“倒退”到以前的 DIV

于 2014-04-05T02:41:13.823 回答