Javascript 约束DIV中的固定内容

我在页面上有一个固定位置元素。我希望该元素包含在我指定的ID或类的某个div标记中。下面是一个例子。在本例中，浮动条不应位于黑框的上方或下方

我不介意使用jQuery来更改函数，我使用的是v。1.8.3

我所追求的。看左边

下面是示例的代码：

HTML

<div class="wrapper">
<div class="top">
    <p>&nbsp;</p>
</div>
<div class="container">
<p>Floating Bar Should not go above this point.</p>

<p>&nbsp;</p>

</div>
<p>Floating Bar Should not go below this point.</p>
    <p>&nbsp;</p>

</div>

    <div class="add-this-container" >
    <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js">   </script>
<!-- AddThis Button END -->
</div>

---

将jQuery函数附加到window scroll，并检查div是否与您设置的边界的顶部或底部重叠。如果它重叠，则添加或删除一个类，使其从固定位置的元素到固定位置的元素，并在指定的边界处封顶。当用户向后滚动时，将其翻转回固定位置，它将再次“浮动”。

将jQuery函数附加到window scroll，并检查div是否与您设置的边界的顶部或底部重叠。如果它重叠，则添加或删除一个类，使其从固定位置的元素到固定位置的元素，并在指定的边界处封顶。当用户向后滚动时，将其翻转回固定位置，它将再次“浮动”。

我在html中添加了一些Id以获取它们的位置（页眉和页脚）

浮动条不应超过此点


浮动条不应低于此点


我在html中添加了几个Id以获取它们的位置（页眉和页脚）



浮动条不应超过此点


浮动条不应低于此点


纯粹是巧合，我发现了一个jQuery插件，它为我实现了这一点。它被称为“粘性浮动盒”，可以找到。
纯粹是巧合，我在一个jQuery插件上找到了它。它被称为“粘性浮动盒”，可以找到。
一定要给它一个高z指数also@arshA-为了清楚起见，它不是内容，它是内容旁边的，我不希望它在旁边。我们可以看看你的html和css的一个或多个实例吗？@UrbanBjörkman-我添加了一个更新的问题。@Lynda，我用你的小提琴作为解决方案的基础，一定要给它一个高z指数also@arshA-为了清楚起见，它不是内容，它是内容旁边的，我不希望它在旁边。我们可以看看你的html和css的一个或多个实例吗？@UrbanBjörkman-我添加了一个更新的问题。@Lynda，我用你的小提琴作为一个解决方案的基础我知道足够多的JS是危险的，但不足以写出你所说的，你能提供一个例子吗？试试这个：它仍然有点过于紧张，但理论是存在的。我知道足够多的JS是危险的，但不足以写出你所说的，你能举个例子吗？试试这个：它仍然有点过于紧张，但理论是存在的。
.wrapper{
    height:1500px;
    background: #808080;
    width: 300px;
}
.container{
    background: #111;
    height: 600px;
}
.top{
    height: 400px;
    background: #7e0000;
}
.add-this-container{
position: absolute;
    left: 350px;
    top: 250px;
}
.addthis_floating_style{
    background: #ccc;
 }
p{
    color: white;
}

<div class="wrapper">
    <div class="top">
        <p>&nbsp;</p>
    </div>
    <div class="container">
    <p id="header">Floating Bar Should not go above this point.</p>

    <p>&nbsp;</p>

    </div>
    <p id="footer">Floating Bar Should not go below this point.</p>
        <p>&nbsp;</p>

</div>

<div class="add-this-container" >
        <!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>

$(function(){

    //Scroll event, sets position on scroll
    $(document).scroll(function() { 
        position();        
    });

    // Set initial position on document ready
    position();
});


function position()
{
            //Collect positions
        var floaterHeight = $('.addthis_floating_style').height();
        var headerBreakoff = $('#header').offset().top + $('#header').height();
        var footerBreakoff = $('#footer').offset().top;

        var newTop = $(document).scrollTop() + 20; // this will be position when between header and footer        

        if(newTop <= headerBreakoff) // Above header
        {        
            newTop = headerBreakoff;
        }
        else if(newTop + floaterHeight >= footerBreakoff) // Below footer
        {
            newTop =  footerBreakoff - floaterHeight;
        }

        //Set position
        $(".addthis_floating_style").offset({ top: newTop});
}