1

因此，我的网站http://develop-web.com/开始融合得很好，但是当我将窗口退出最大化模式时，我遇到了这个问题，所有不在屏幕上的东西都必须消失。

在 Google Chrome、Firefox 和 IE 10 中也会出现此问题。

我不习惯这种网站结构，所以我不想在尝试解决这个问题时把事情搞得更糟。可能是什么问题？

谢谢参观 ：）

编辑：

转到最大化窗口中的页面，当您将其从最大化（不是最小化，只是使其变小）中取出时，som 内容将消失： http: //gyazo.com/a5744085b32b1cf05acc4e1efa653da9

4

3 回答 3

1

当窗口调整大小时，javascript 会在某处为您的#wrapper 添加固定高度，请尝试找出为什么会发生这种情况。

----我认为这个错误导致了你的问题

未捕获的类型错误：无法在线读取未定义的属性“左侧”jquery.scrollTo.js:11

如果我切换选项卡，它不仅会在您调整窗口大小时发生在我身上

于 2013-04-19T20:54:29.973 回答
1

您绝对应该熟悉浏览器中的调试工具。我的偏好是 Chrome 中的开发人员工具（CMD+alt+i在 Mac 上，F12在 Windows 上）。Google 提供了一个很棒的指南，可以帮助您入门。

如果您查看控制台选项卡，您会发现resizePanel当您调整主页上的窗口大小时，您的 JavaScript 会在方法中引发错误。

如果您查看元素面板并调整窗口大小，您会看到某些东西正在将遮罩元素的高度设置为窗口大小。

要修复这两个错误，请尝试按如下方式更新您的代码：

$(document).ready(function() {

    $('a.panel').click(function () {

        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr('href'), 800);      

        return false;
    });

    $(window).resize(function () {
        resizePanel();
    });

});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_width);

        // These lines are erroneously setting the height of the mask to the
        // height of the window so when the user scrolls down, an area of
        // unmasked content is visible. 
        //$('#wrapper, .item').css({width: width, height: height});
        //$('#mask').css({width: mask_width, height: height});

        // Try updating as follow as kpsuperplane has suggested
        $('#wrapper, .item').css({width: width});
        $('#mask').css({width: mask_width});

        // This was throwing an error because no anchor elements have
        // the selected class when the page is first hit
        if ($('a.selected').length) {    
            $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
        }   
}
于 2013-04-19T20:56:07.843 回答
1

改变

$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});

至

$('#wrapper, .item').css({width: width});
$('#mask').css({width: mask_width});

在你的resizePanel()js 函数中（如果你查看源代码，它可以在头部的脚本标签中找到）

于 2013-04-19T20:56:25.647 回答