Question

我有以下代码：

<div id="header">
  Header
</div>
<div id="leftside">
  Left Side
<!--A lot of text here.-->
</div>
<div id="right-container">
  <div id="one">
    One
  </div>
  <div id="two">
    Two
  </div>
</div>
<div id="footer">
  Footer
</div>

#header {
  background-color: blue;
  color: white;
  width: 80%;
  height: 100px;
  padding: 5px;
}

#leftside {
  display: inline-block;
  background-color: purple;
  color: white;
  width: 39%;
  padding: 5px;
  vertical-align: top;
}

#right-container {
  display: inline-block;
  background-color: green;
  color: white;
  width: 39%;
  padding: 5px;
}
body{height:400px;}
#one {
  background-color: yellow;
  color: white;
  width: 97%;
  height: 50px;
  padding: 5px;
}

#two{
  background-color: orange;
  color: white;
  width: 37%;
  height: 500px;
  padding: 5px;
  position: fixed;
}

#footer {
  background-color: grey;
  color: white;
  width: 80%;
  height: 500px;
  padding: 5px;
}

$(document).scroll(function() { 
    var $self = $("#two"); 
    $self.css('margin-top', 0); 
    var twoOffset = $self.offset().top + $self.outerHeight(true); 
    if (twoOffset > ($("#footer").offset().top - 30)) { 
        $self.css('margin-top', -(twoOffset - $("#footer").offset().top)); 
    } else { 
        $self.css('margin-top', '30px'); 
    } 
});

请参阅JSFIDDLE here。

该脚本阻止div（id="two"）滚动footer div。

但是我也希望阻止div（id="two"）在其上方直接滚动div（id="one"），正如您在JSFIDDLE中看到的那样。

我想可以使用相同的脚本，但我试图在没有成功的情况下进行调整。你能帮忙吗？

Answer 1

var i = $('#one').offset().top;   
var x = $('#two').offset().top;   
var y = $('window').scrollTop();  

$(window).scroll(function(){      
    $(this).scrollTop(function(){  
        if (y <= y || x <= i) {
            $('#two').css('position','static');  
        }    
    });
});

Answer 2

你正确的容器似乎搞砸了。我建议你使用http://leafo.net/sticky-kit/并做

$("#two").stick_in_parent();

防止div滚动另一个div

2 个答案: