Javascript 在到达底部之前，在特定时间进行固定俯冲停止

这一定是第一百万次有人向我求助了，但不管我怎么努力，我都找不到解决办法。我有一个div，在我的网站上有两张图片，它们就像产品列表右栏的可点击广告一样工作。这个div是固定的，但我希望它，当你向下滚动时，在页面底部之前的300px处停止。我知道我需要javascript来实现这一点，尽管我知道一点HTML，但我并不擅长它，而且我似乎不知道我需要做什么才能使它工作，无论我寻找了多少次解决方案。 我将下面的代码保留在我使用的div中

还有CSS

  #main{
        width: 180px;
        height: auto;
        position: fixed;  
        padding-bottom: 300px;
    }
  #product{
        border: 1px solid;
        border-color: rgba(235,235,235,0.8);
        width: 180px;
        height: 270px;
    }
  #product img{
        margin: auto;
        display: block;
        width: 100%;
        height: 100%;   
        }
    #product:hover{
        border-color: red;
    }
    #paper{
        border: 1px solid;
        border-color: rgba(235,235,235,0.8);
        width: 180px;
        height: auto;
    }
    #paper img{
        margin: auto;
        display: block;
        width: 100%;
        height: 100%;   
        }
    #paper:hover{
         border-color: red;
    }
     #description{
        text-align: center;
        width: 95%;
        position: absolute;
        top: 520px;
        background-color: rgba(215,81,83,0.5);
        color: white;
        left: 4.5px;
    }

---

任何帮助都将不胜感激。

无需Javascript即可完成。这里最简单的解决方法是使用

position:sticky。它相对较新，因此最旧的浏览器（）不支持它

具有粘性位置的元素将根据滚动位置（此处
top:0；
）保持定义的位置，但在滚动出窗口时将保持在其容器的限制内：


#主体{
高度：1000px；
宽度：100%；
背景颜色：黄色；
}
#maindiv{
宽度：180px；
高度：自动；
位置：粘性；
排名：0；
垫底：300px；
背景色：红色；
}
#第一组{
边框：1px实心；
边框颜色：rgba（235,235,235,0.8）；
宽度：180px；
高度：自动；
}
#第2组{
边框：1px实心；
边框颜色：rgba（235,235,235,0.8）；
宽度：180px；
高度：270px；
}
#底部{
宽度：100%；
高度：100px；
背景颜色：蓝色；
}

如果你能提供一个答案，这个问题将有一个更好的答案。为了扩展@GhassenLouhaichi，你的例子不适合重现你的问题：首先，你的HTML是无效的（关闭的标记永远不会打开），并且它是不可滚动的。我们的任务不应该是修复代码以查看您的problem@PeterCsala请不要编辑OP的语法错误，它们应该在注释或回答中解释。这也会使潜在的回答者更难解决问题problem@Kaddath抱歉，我建议进行更新，在那里我恢复了语法更正。@GhassenLouhaichi我在这里重新创建了它。如果它不正确，很抱歉，我的帖子，我是新来的，我不知道需要什么来获得我想要的帮助…我希望这个例子更容易理解…我希望我创建的红色div在它们到达蓝色div之前停止（在它们到达页面底部的最后100像素之前停止）很多@Kaddath！它对我的工作非常好…我只看到sticky元素与internet explorer不兼容，但如果它在chrome opera和mozilla上工作，它就可以了me@JohnKara是的，但它只意味着旧版本的Windows浏览器，因为它被重命名了。您可以看到它受Edge支持