由于更改页面宽度，链接到锚点会移动到错误的位置

Question

我无法解决一个问题，但也许有人能够找到解决方案？

左侧是内容区域（默认宽度= 70％）。右侧是菜单区域（默认宽度= 30％）。

当我滚动内容的页面宽度变为100％并且菜单消失时：

.down .widget-area{
    width: 0;
}

.down .container{
    width: 100%;
}

很好。

但是在页面的开头有几个锚点的链接：

<a href="#header1">GoTo Header 1</a>
<a href="#header2">GoTo Header 2</a>
<a href="#header3">GoTo Header 3</a>

当我点击“GoTo Header 1”链接时，一切正常。 但是如果我点击链接“GoTo Header 2”移动到错误的位置（低于标题标题），因为脚本会改变内容区域的宽度。

示例：http://jsfiddle.net/7uouhs6y

请，任何想法？

Answer 1

document.onscroll = function(){

    document.querySelector("#content").className = window.pageYOffset >= window.innerHeight ? "down" : "up";
}

根据您上面的功能，当您向下滚动并且偏移量大于innerHeight时，它应用100％宽度。为避免这种情况，您应该将宽度保持在70％。

而不是这个

.down .container{
    width: 100%;
}

使用此

.down .container{
    width: 70%;
}

也不要指定左侧div的高度，使其根据内容自动调整。

    .container{
        float: left;
        background: red;
      /*height: 300%;*/
    }