Question

关于如何在浏览器重新调整大小时重新调整包装器和掩码大小的任何想法？现在它的面具一旦加载就停止了，所以基本上当我滚动内容时，它的切断。有关示例，请参阅here。

$(document).ready(function() {

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

        $('a').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);

    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}

Answer 1

这并不需要javascript。我会把你的#wrapper，＃mask和＃item1设置为媒体查询（当你切换到你的移动样式时）：

height: auto !important;

Answer 2

首先，如果您让css将其作为固定对象处理，您将使用掩码避免很多麻烦。如果你这样做，你可以从调整大小函数中提取大量代码，事情会运行得更快。

#mask{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url(semi-transparent.png);
}

与您的包装物品相同。只需设置宽度％100，让css完成繁重的工作......

.item {
  width:100%;
}

所以现在你的调整大小功能是......

$(window).resize(function () {
  $('#wrapper').css({width: $(window).width(), height: $(window).height()})
    .scrollTo($('a.selected').attr('href'), 0);
});

至于包装器本身，我不清楚问题是什么。如果您可以发布演示或jsfiddle，我会更新我的答案。

Answer 3

出于某种原因，当我在页面加载时将鼠标悬停在Firebug中的id='mask'上时，我看不到任何颜色。当页面加载时，只有id='item1'在Firebug中变色。当您调整浏览器窗口的大小时，掩码显示颜色并且其CSS被划掉。此外，您在Firebug中有大量的控制台错误。虽然我们想提供帮助，但我们不打算为您构建整个网站。使用Firebug首先调试代码，然后再回复我们。感谢。

在浏览器调整大小时调整包装器/掩码

3 个答案: