Sticky Footer重叠Div问题：水平滚动固定头尾网站布局求助

嗨，我来帮你搞定这个头疼的问题！你做的带固定页眉/页脚的水平滚动网站，核心功能跑通已经很棒了，小屏幕下的重叠问题其实是固定定位元素脱离文档流导致的常见坑，结合你用的scrollTo脚本，给你几个针对性的解决思路：

1. 给内容区域动态预留页脚宽度 #

因为是水平滚动，普通垂直方向的边距没用，得给内容容器加右侧内边距，值等于页脚的宽度，还得适配窗口大小变化：

// 监听窗口 resize，动态调整内容区右内边距
$(window).on('resize', function() {
  const footerWidth = $('footer').outerWidth();
  $('.content-div').css('padding-right', `${footerWidth}px`);
}).trigger('resize'); // 页面加载时先执行一次

这样内容区域最右侧会空出页脚的宽度，滚动到最右边时就不会被页脚盖住了。

2. 小屏幕下切换页脚定位逻辑 #

如果小屏幕不需要页脚一直固定在视野里，可以用媒体查询把它改成绝对定位，让它跟着内容末尾走：

@media (max-width: 768px) {
  footer {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .content-container {
    position: relative;
    min-height: 100vh; /* 确保容器高度至少占满屏幕 */
    padding-right: 200px; /* 这里填你页脚的实际宽度 */
  }
}

这种方式适合小屏幕下用户滚动到内容末尾才需要看到页脚的场景。

3. 调整scrollTo的滚动偏移量 #

你用scrollTo做导航滚动时，可能没考虑页脚宽度，导致滚动位置偏右，内容被覆盖。可以给滚动目标加个右侧偏移：

$('nav a').on('click', function(e) {
  e.preventDefault();
  const targetId = $(this).attr('href');
  const footerWidth = $('footer').outerWidth();
  // 滚动到目标元素时，自动预留页脚宽度
  $(window).scrollTo(targetId, {
    duration: 800,
    offset: { right: footerWidth }
  });
});

这样点击导航滚动后，目标内容会刚好避开页脚区域。

关于jsfiddle里Logo重叠的问题 #

这大概率是jsfiddle的iframe环境和你本地样式冲突导致的，比如你本地给Logo加了父容器的定位或层级限制，而jsfiddle里没生效。可以给Logo容器加个层级保障：

.logo-container {
  position: relative;
  z-index: 100; /* 只要比页眉的z-index高就行 */
}

内容的提问来源于stack exchange，提问作者Luis M