Question

所以我的网站http://developed-web.com/开始变得非常好，但是我遇到了这个问题，当我从最大化模式中取出窗口时，屏幕上不能消失的所有内容都会消失。

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

我不习惯这种网站结构，所以在尝试解决这个问题时，我不想把更多内容弄得一团糟。问题是什么？

谢谢你看一下：）

修改

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

Answer 1

某个地方javascript在调整窗口大小时为你的#wrapper添加了一个固定的高度，生病了，找出你发生这种情况的原因。

----我认为此错误导致您的问题

未捕获的TypeError：无法读取属性＆＃39; left＆＃39;未定义的jquery.scrollTo.js:11

行

不仅在你调整窗口大小时，如果我切换标签

，它也会发生在我身上

Answer 2

您一定要熟悉浏览器中的调试工具。我的偏好是Chrome中的开发者工具（Mac上为CMD+alt+i，Windows上为F12）。 Google here提供了一个很棒的指南来帮助您入门。

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

如果您查看元素面板并调整窗口大小，您将看到某些内容正在将蒙版元素的高度设置为窗口的大小。

要解决这两个错误，请尝试按以下步骤更新代码：

$(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);
        }   
}

Answer 3

更改

$('#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函数中的

（如果你看源代码，可以在头部的脚本标签中找到）

调整窗口大小/最大化时，背景/内容下半部分消失

3 个答案: