本文介绍了一种简单的方法，通过JavaScript实现在页面滚动时，左侧导航区域跟随窗口移动，避免滚动过程中出现空白区域，从而提高用户体验。代码示例中，首先将导航区域设置为相对定位，并记录其初始位置，然后在窗口滚动事件中，根据滚动距离调整导航区域的top值，确保其始终可见。
我们经常可以看到这样的页面，页面的主体部分采用左右布局，靠左的为导航，靠右的为页面主要内容。如下图：
而当左边的导航高度不够、而右边的内容很多时，页面往下拉会发现左边出现了一大块空白，导致主体内容显得窄小且页面整体不对称，如下图：
解决的办法之一是在窗口滚动时，左边的区域也跟着一起移动，这不但解决了上述问题，也一定程度上地增强了用户体验，因为此时用户能够随时地导航到其他页面而不需要回到页面顶部。这一效果已经在很多网站采用了，比如淘宝社区：
当然实现这种效果的方法有很多，这里给出一种比较简单的，代码如下。首先左边的区域采用相对定位，初始的top值为0，接下来记录下左边区域的初始位置(这里为t)，然后当窗口滚动时改变这个top值，为了避免在页面顶部时左边的区域覆盖导航，这里分两种情况：当滚动值scrollTop大于t时，把top值设置为窗口滚动的高度，则左边的区域贴在最顶端；否则还原为初始的位置值t。
同样的道理，如果要固定顶部导航也是可以做到的。
扫一扫
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
