Javascript 当滚动到相对容器底部时的固定位置菜单

我试着模拟Yelp用他们的

我知道当元素到达某个屏幕滚动位置时，如何将其翻转到固定位置，但当它到达相对容器的底部时，如何关闭固定位置

---

解决了这个问题，但是由于它是相当新的，所以它没有很大的覆盖范围

您可以尝试这样做：

这里是一个带注释的JavaScript版本：（注意：它使用jQuery，但不是必需的。如果您需要一个简单的JavaScript版本，我很乐意提供一些提示）

var oritop=-100；
$（窗口）.scroll（函数（）{//在滚动时，
var scrollt=window.scrollY；//获取滚动量
var elm=$（“.box”）；//获取我们要使之成为粘性的框
如果（oritop<0）{
oritop=elm.offset（）.top；//缓存原始顶部偏移
}
如果（scrollt>=oritop）{//如果您滚动过它，
css（{“position”：“fixed”，“top”：0，“left”：0}）；//使其具有粘性
}
否则{//
css（“position”、“static”）；//将其重置为默认位置
}
});

您可以通过标记所选项目来完成此操作

滚动时将菜单置于绝对位置并标记所选项目的功能：

jQuery(window).scroll(function () {
    console.log(jQuery(window).scrollTop());
   // x = jQuery("html").scrollTop();  

    x = jQuery(window).scrollTop(); // corrigindo bug do chome

    /* Item marcado de acordo com a rolagem */
    switch (true) {
    case (x >= 600 && x < 2500): // ajuste aqui a area    
        jQuery('.coluna-222-right a').removeClass('ativo');
        jQuery('.coluna-222-right a.programacao').addClass('ativo');           
        break;
    case (x >= 2500 && x < 5000):
        jQuery('.coluna-222-right a').removeClass('ativo');  // ajuste aqui a area 
        jQuery('.coluna-222-right a.palestrantes').addClass('ativo');                  
        break;
    case (x >= 5000 && x < 5765):
        jQuery('.coluna-222-right a').removeClass('ativo');  // ajuste aqui a area 
        jQuery('.coluna-222-right a.local').addClass('ativo');
        break;
    } 


    if (x>40) {     
    jQuery(".coluna-222-right ul").css("position","absolute");
    jQuery(".coluna-222-right ul").css("top",x+20);   // ajuste aqui a posição do menu, pode usar - ao invés de +
    }

    else {          
    jQuery(".coluna-222-right ul").css("position","static");
    jQuery(".coluna-222-right ul").css("top","0");  
        }   

});

---

这很接近，我想要实现的不同点是，蓝色框不应该超出灰色的outter内容框。它应该放在那个盒子里@Dan如果足够的话，还有一个

：。朋友，我翻译过，但请记住，我们巴西人经常使用美国的stackoverflow。每个人都可以制造一种理解的力量，对吗？请注意，本网站仅为英文版。我删除了葡萄牙语文本，因为它们是“噪音”（参见和）。用英语表达你的变量是可选的，但可能会增加你帮助世界其他地方的机会，并因此获得更多选票。好吧，很好。
jQuery(window).scroll(function () {
    console.log(jQuery(window).scrollTop());
   // x = jQuery("html").scrollTop();  

    x = jQuery(window).scrollTop(); // corrigindo bug do chome

    /* Item marcado de acordo com a rolagem */
    switch (true) {
    case (x >= 600 && x < 2500): // ajuste aqui a area    
        jQuery('.coluna-222-right a').removeClass('ativo');
        jQuery('.coluna-222-right a.programacao').addClass('ativo');           
        break;
    case (x >= 2500 && x < 5000):
        jQuery('.coluna-222-right a').removeClass('ativo');  // ajuste aqui a area 
        jQuery('.coluna-222-right a.palestrantes').addClass('ativo');                  
        break;
    case (x >= 5000 && x < 5765):
        jQuery('.coluna-222-right a').removeClass('ativo');  // ajuste aqui a area 
        jQuery('.coluna-222-right a.local').addClass('ativo');
        break;
    } 


    if (x>40) {     
    jQuery(".coluna-222-right ul").css("position","absolute");
    jQuery(".coluna-222-right ul").css("top",x+20);   // ajuste aqui a posição do menu, pode usar - ao invés de +
    }

    else {          
    jQuery(".coluna-222-right ul").css("position","static");
    jQuery(".coluna-222-right ul").css("top","0");  
        }   

});

jQuery("a").click(function () {
    jQuery("a").removeClass("ativo");
    jQuery(this).addClass("ativo");

});