2

我正在尝试为 Snap.js 找到合适的布局：

http://jakiestfu.github.io/Snap.js/demo/apps/default.html

推荐的 HTML / CSS 的问题是：

  1. 页眉（导航栏）不粘
  2. 当您向下滚动主要内容时，地址栏不会在 Android 版 Chrome 中隐藏
  3. 固定侧边栏不与地址栏同步移动
  4. 在我下面的小提琴中，主要内容在向右移动时可以滚动一点（？！）

  1. 我想固定标题，但它仍然需要与内容区域一起垂直滚动。CSS似乎不支持这一点，所以我尝试了一个脚本解决方案：

    animate();

function animate() {
    requestAnimFrame(animate);
    draw();
}

function draw(){
    var pos = content.offset();
    nav.css('transform', 'translateX('+ pos.left +'px)');
}

    http://jsfiddle.net/HFjU6/2533/

    如果有任何其他选项，请告诉我其他选项，如果禁用 JS，我担心 UI 会损坏。

  1. 为了使地址栏消失（又名“全屏模式”），我必须制作 content position: static;。

    缺点：v-scrollbar 显示在右侧窗口边框，而不是内容区域的右侧。还有其他方法吗？

  1. 如果侧边栏position: fixed包含过高的内容，则可以从主要内容独立滚动。

    问题：它们不会与地址栏一起移动，而是在地址栏完全消失后重新定位（Android 版 Chrome 中的标准行为是将内容与地址栏同步移动，地址栏会一直滑动输入以获得良好的过渡）。

    它适用于position: absolute;，但这会使我的侧边栏随着主要内容滚动，并且您会看到正文背景低于原始高度的 100%。

  1. 我可以将主要内容区域稍微向左滚动，同时将其平移到右侧并破坏布局（可能仅适用于触摸设备，但如果您使用鼠标中键进行平移，也可能适用于桌面）。为什么会这样？
4

0 回答 0