2

下面的代码包括两部分，第一部分仅处理#logo 页面

$('#logo').on('click', function() {
// get home info
$.get('ajax.php', {page: 'home'}, function(data) {
    result = $.parseJSON(data);     
    // reset background
    $('#content-area').backstretch(result.background);      
    // reset navigation
    $('.current_page_item_green').removeClass('current_page_item_green');
    $('.current_page_item').removeClass('current_page_item');
    $('.nav-link').each(function() {
        $(this).removeClass('green');
    });     
    // fade out the footer
    $('#footer-row').fadeIn();      
    // reset copy
    $('#subnav').html('');
    $('#home-copy').html(result.copy);

    // reset sizes and colors
    $('#home-logo').animate({height: 200}, 0);
    $('#home-copy').animate({height: 200, backgroundColor: '#004329', color: 'white', paddingTop: 0}, 0);
});});

第二个处理左侧页面，

$(document).on('click', '.nav-link-ajax', function() { handleAjax($(this));});function handleAjax(eBtn) {
// get the page we want
getPage = eBtn.attr('href');        
// make AJAX call
$.get('ajax.php', {page: getPage}, function(data) {
    result = $.parseJSON(data);     
    // fill in new page
    $('#subnav').html(result.subnav);
    $('#home-copy').html(result.copy);

    // get document height and get rid of 15% minus the height of the boxes and padding
    docHeight = [$(document).height()-($(document).height()*.15)]-200;

    // change height of content boxes
    $('#home-logo').animate({height: docHeight}, 0);
    $('#home-copy').animate({height: docHeight, backgroundColor: 'white', color: 'gray', paddingTop: 0}, 0);

    // fade out the footer
    $('#footer-row').fadeOut();

    // change background
    $('#content-area').backstretch(result.background);

    // clear old nav
    $('.current_page_item_green').removeClass('current_page_item_green');
    $('.current_page_item').removeClass('current_page_item');

    // update navigation
    if (result.nav_color == 'green') {
        // add green
        $('.nav-link').each(function() {
            $(this).addClass('green');
        });
        $(result.current_page_item).addClass('current_page_item_green');
    } else {
        $('.nav-link').each(function() {
            $(this).removeClass('green');
        });
        $(result.current_page_item).addClass('current_page_item');
    }
});}

我的问题是，在点击其他网页然后返回 logo 页面后，底部和右侧似乎有额外的空间，logo 页面的背景大小将跟随之前访问过的网页的背景。

我该如何解决这个问题？谢谢你

4

1 回答 1

1

如我所见，问题似乎与 backstretch 插件有关。一方面，每次调用它都会向 DOM 添加一个新的 div 元素！这只是我在这个插件中看到的众多问题之一；将位置设置为absolute不固定，不考虑父位置设置等。

我的建议，删除它。当然不仅仅是插件，而是你调用它的代码中的任何地方。只需使用您的 IDE（Notepad++、Komodo Edit 等）查找所有实例.backstretch(并删除这些行。看起来 backstretch 正在动态添加这个背景div，所以我认为您不需要删除任何 HTML 行。

仅供参考，我发现它在 main.js 中只调用了 4 次，当然在插件文件中调用了一次 main.js 中的
Lines [126, 152, 185, 237]
插件存在于 plugins.js 的第 24 到 28 行

完成后，您不应再在任何页面上拥有背景。仔细检查，继续。我会等 ...

好的，你回来了？没有背景，但其他一切都一样吗？检查控制台是否有错误？没有任何？好的。让我们开始这场派对。制作背景的简单方法是使用 position 的 div 元素fixed。给它一个内部 img 元素，然后根据需要简单地更改源文件。太容易了吧？尝试这个：

HTML

<body>
    <div id="background" style="position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;">
        <img alt="alt text not necessary" src="img/layout/bg_home.png" height="100%" width="100%">
    </div>
    <div ....

然后在您的 JS 中，将旧行（您现在应该删除的行）替换为以下$('#content-area').backstretch(result.background);内容：

在 main.js 的第 126 行进行初始设置：

$('#background img').attr("src", "img/layout/bg_home.png");

对于线 [152, 185, 237]

$('#background img').attr("src", result.background);
于 2013-06-04T20:15:15.663 回答