Question

我有一个简单的3列网站 - 左，中，右。中间列是主要文本内容的位置，通常比左侧或右侧内容长得多。

在我写一个之前，是否有一个JQuery插件可以在用户滚动窗口时保持我的左右列内容？即滚动时它们会在屏幕顶部下方10px处，因此它们始终在视野中。但是当用户向右滚动到顶部时，它们就会坐在适当的位置。

示例页面在这里： http://www.flowmtb.com/morzine/

显然，如果浏览器窗口比左侧或右侧内容短，则不应移动，否则用户将永远不会看到不可见的内容！

干杯，盖

Answer 1

你不需要jQuery。在CSS中查看position: fixed。但是你可以使用jQuery来检测浏览器窗口的大小，这样你就可以设置position：absolute;如果它太小了。

更新：我制作了example page。重要的代码是：

function colfix(column) {
  if($(window).height() + 20 < $(column).height()) {
    $(column).css("position", "absolute");
  }else{
    $(column).css("position", "fixed");
  }
}

$(document).ready(function() {
  colfix("#two");
})

$(window).resize(function() {
  colfix("#two");
});

滚动时是否有一个Jquery插件来修复内容？

1 个答案: