Question

我创建了一个函数，在某个滚动点之后将DIV的“位置”更改为“固定”。目的是在滚动页面时使其在屏幕上可见。效果很好（虽然不是在IE6中）。

问题是，当我到达页面底部时，我不希望DIV与页脚重叠。我猜我需要将'position'从'fixed'改为'absolute'，将'bottom'属性设置为略高于footer高度的值。

最好在this page上测试此问题。 确保您的窗口调整小一点，以便您可以看到侧边栏与页脚重叠。

到目前为止，这是我的代码：

 $(document).ready(function(){

  var element = $("#sidebar");
  var window_height = $(window).height();
  var element_height = element.height();

  // On scroll, set or unset the fixed position
  $(window).scroll(function() { 
    if (window_height > element_height) {
      if ($(document).scrollTop() > 220) {
        element.css("position","fixed");
        element.css("top","9px");
        element.css("padding-top","0");
      }
      else {
        element.css("position","relative");
        element.css("top","0");
        element.css("padding-top","57px");      
      }
    }
    else {
      element.css("position","relative");
      element.css("top","0");
      element.css("padding-top","57px");
    }
  });

  // On window resize, set or unset the fixed position
  $(window).resize(function(){
    window_height = $(window).height();
    if (window_height > element_height) {
      if ($(document).scrollTop() > 220) {
          element.css("position","fixed");
          element.css("top","9px");
          element.css("padding-top","0");
        }
        else {
          element.css("position","relative");
          element.css("top","0");
          element.css("padding-top","57px");      
        }
    }
    else {
      element.css("position","relative");
      element.css("top","0");
      element.css("padding-top","57px");
    }
  });

});

Answer 1

在以下情况下替换：

if ($(document).scrollTop() > 220) {
    element.css("position","fixed");
    element.css("top","9px");
    element.css("padding-top","0");
}

使用：

if(
$('#sidebar').position().top - $('#footer').position().top
 < $('#sidebar').height()
) {
    element.css("position","absolute");
    element.css("top", ''+$('#sidebar').position().top+'px');
    element.css("padding-top","0");
}

Answer 2

我不知道我的quess是否正确但是你可能会把你的菜单DIV包含在其他DIV中，并限制menuDIV移动到其外部DIV的边界

其他方式可能正在使用此解决方案 http://www.dogfeeds.com/?p=264

我希望这会有所帮助

MTH

Answer 3

感谢您的回复！

我最终将此作为解决方案实施：

 $(document).ready(function(){

  var element = $("#sidebar");
  var window_height = $(window).height();
  var element_height = element.height();

  $(window).scroll(function() { 
    if (window_height > element_height) {
      if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) {
        element.css("position","absolute");
        element.css("top", "auto");
        element.css("bottom","-60px");
      }
      else if ($(document).scrollTop() > 220) {
        element.css("position","fixed");
        element.css("top","9px");
        element.css("padding-top","0");
        element.css("bottom","auto");
      }
      else {
        element.css("position","relative");
        element.css("top","auto");
        element.css("padding-top","57px");
        element.css("bottom","auto");    
      }
    }
    else {
      element.css("position","relative");
      element.css("top","auto");
      element.css("padding-top","57px");
        element.css("bottom","auto");
    }
  });

  $(window).resize(function(){
    window_height = $(window).height();
    if (window_height > element_height) {
      if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) {
        element.css("position","absolute");
        element.css("top", "auto");
        element.css("bottom","-60px");
      }
      else if ($(document).scrollTop() > 220) {
        element.css("position","fixed");
        element.css("top","9px");
        element.css("padding-top","0");
        element.css("bottom","auto");
      }
      else {
        element.css("position","relative");
        element.css("top","auto");
        element.css("padding-top","57px"); 
        element.css("bottom","auto");     
      }
    }
    else {
      element.css("position","relative");
      element.css("top","auto");
      element.css("padding-top","57px");
        element.css("bottom","auto");
    }
  });

});

创建滚动跟随功能，但需要防止它与页脚Div重叠

3 个答案: