Css 如何使固定元素停止在相对父元素的底部滚动？

我有一个简单的例子：

#主{
显示：内联块；
位置：相对位置；
浮动：左；
宽度：100%；
高度：2000px；
背景色：#000；
}
#包裹{
显示：内联块；
浮动：左；
高度：200px；
宽度：100%；
背景色：#f00；
}
#固定的{
高度：50px；
位置：固定；
左：0px；
背景色：#ccc；
顶部：0px；
宽度：100%；
显示：内联块；
浮动：左；
}

---

您需要jquery。恐怕你不能只用css就做到这一点

您可以添加以下css：

.relative {
    position:relative;
}

当以包裹高度（200px）滚动时，使用以下命令将该类添加到“固定”：

---

您需要jquery。恐怕你不能只用css就做到这一点

您可以添加以下css：

.relative {
    position:relative;
}

当以包裹高度（200px）滚动时，使用以下命令将该类添加到“固定”：

---

没有JS，您无法做到这一点。一个可能的解决方案是在页面的滚动上绑定一个事件

一旦页面滚动到

#wrap

的底部，

#fixed

div就成为一个绝对位置（而不是fixed）

---

没有JS，你无法做到这一点。一个可能的解决方案是在页面的滚动上绑定一个事件

一旦页面滚动到

#wrap

的底部，

#fixed

div就成为一个绝对位置（而不是fixed）

---

当时间到时，与父对象平滑滚动：

$（窗口）.on（'scroll'，函数（e）{
固定值=$（'固定'）；
//用于与父级滚动的类标识符
var scrollClass='不太固定'；
//获取#wrap的底部位置
var posBottom=fixed.parent（）.position（）.top+fixed.parent（）.outerHeight（）-fixed.outerHeight（）；
//检查滚动位置
if（$（this）.scrollTop（）>posBottom）
固定的.addClass（scrollClass）；
其他的
fixed.removeClass（scrollClass）；
});
body，html{margin:0}
#主要{
显示：内联块；
位置：相对位置；
浮动：左；
宽度：100%；
高度：2000px；
背景色：#000；
}
#包裹{
显示：内联块；
浮动：左；
高度：200px；
宽度：100%；
背景色：#f00；
位置：相对位置；
}
#固定的{
高度：50px；
位置：固定；
左：0px；
背景色：#ccc；
顶部：0px；
宽度：100%；
显示：内联块；
浮动：左；
}
#固定的，不固定的{
位置：绝对位置；
顶部：自动；
底部：0；
}
当时间到时，与父对象平滑滚动：


$（窗口）.on（'scroll'，函数（e）{
固定值=$（'固定'）；
//用于与父级滚动的类标识符
var scrollClass='不太固定'；
//获取#wrap的底部位置
var posBottom=fixed.parent（）.position（）.top+fixed.parent（）.outerHeight（）-fixed.outerHeight（）；
//检查滚动位置
if（$（this）.scrollTop（）>posBottom）
固定的.addClass（scrollClass）；
其他的
fixed.removeClass（scrollClass）；
});
body，html{margin:0}
#主要{
显示：内联块；
位置：相对位置；
浮动：左；
宽度：100%；
高度：2000px；
背景色：#000；
}
#包裹{
显示：内联块；
浮动：左；
高度：200px；
宽度：100%；
背景色：#f00；
位置：相对位置；
}
#固定的{
高度：50px；
位置：固定；
左：0px；
背景色：#ccc；
顶部：0px；
宽度：100%；
显示：内联块；
浮动：左；
}
#固定的，不固定的{
位置：绝对位置；
顶部：自动；
底部：0；
}

Fixed不会滚动，因为。。好它是固定的。我不明白，你的问题是什么。我的问题是，虽然父div已经看不见了，但固定div仍然可见。我希望它留在相对div中，并在相对div离开视线时立即离开视线，就像
position:sticky
的情况一样……但我认为目前这只是Chrome。您提供的JSFIDLE没有父元素或子元素，只有兄弟元素。谢谢。您的小提琴没有显示问题，您应该使用上面的示例代码进行更新。修复了无法滚动的问题，因为。。好它是固定的。我不明白，你的问题是什么。我的问题是，虽然父div已经看不见了，但固定div仍然可见。我希望它留在相对div中，并在相对div离开视线时立即离开视线，就像
position:sticky
的情况一样……但我认为目前这只是Chrome。您提供的JSFIDLE没有父元素或子元素，只有兄弟元素。谢谢。你的小提琴没有显示问题，你应该用上面的示例代码更新它。我建议在可以避免的情况下不要使用硬编码值。在Alvaro的例子中，避免硬编码值的一个简单方法是：基本上是一样的，只是检查一些不可见的锚在结尾的位置，如果可以避免的话，我建议不要使用硬编码值。在Alvaro的例子中，一个避免硬编码值的简单方法是：基本上是一样的，只是检查一些不可见锚在结尾的位置，我建议不要使用
！重要的
。。。曾经：）@AlvaroMenéndez touché：）这样做是因为他使用ID，而不是类。我将编辑示例。我建议不要使用
！重要的
。。。曾经：）@AlvaroMenéndez touché：）这样做是因为他使用ID，而不是类。我将编辑示例。
$(window).scroll( function() {
    var wrapBottom = $('#wrap').position().top+$('#wrap').outerHeight(true),
        scrollPos = $(window).scrollTop();
    if( scrollPos > wrapBottom ) {
        $('#fixed').css( {'position':'absolute','top':wrapBottom+'px'});
    }
    else {
        $('#fixed').css( {'position':'fixed','top':'0px'});        
    } 
});