Javascript 用粘性工具粘上一个div，然后在AngularJS中的特定点释放它

我有一个两栏的网页。我想在左列中粘贴一个div，直到用户向下滚动到右列中某个元素的特定端。我正在尝试使用Jquery库粘性工具包。我可以粘贴div，但是当我点击右列元素的末尾时，我无法释放它。Jquery代码在AngularJS指令中（尽管我认为它不会影响问题的解决）

找到一个打劫者：

HTML:

<div class="container">
      <div class="column-one">
        <div sticky class="stick">
          <map latitude="39.65" longitude="3.0175" zoom="8" class="map-container" style="height: 300px; margin-bottom: 20px"></map>
        </div>
      </div>
      <div class="column-two">
        <h3>Sticky Navigation Example</h3>
        <p>The navbar will stick to the top when you reach its scroll position.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <h3 id="release-stick">I WANT TO RELEASE THE STICKY COLUMN AT THE END OF THIS ELEMENT</h3>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      </div>
    </div>

CSS:

var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
  $scope.welcome = "Hello, testing sticky!" ;
});

app.directive('sticky', function() {    
    function link(scope, element, attrs) {          

        console.log("Sticky directive has been called!");
        $(document).ready(function() {
            //var elParent = $("#release-sticky");    
            console.log("Sticky tries to get parent!");              
            var options = {/*parent: elParent,*/ bottoming: false};         
            $(".stick").stick_in_parent(options); 
        });                                               
    };

    return {        
        link: link
    };
});

.column-one {width: 40%; float:left; margin-right: 20px}
.column-two {width: 50%; float:right; margin-right: 20px}

---

代码有三个问题。首先，考虑到您正在使用float，您需要在

#release sticky

的末尾添加一个带有

clear

属性的元素（或者使用css

clearfix

）。基本上是这样的：

<div id="release-sticky" class="container">
  ...contents...
  <div style="clear: both"></div>
</div>

目录

这背后的原因是，当您使用浮动并且之后不清除时，浏览器不会为父级分配高度。（因此基本上你的

#release sticky

的高度为0）

其次，在使用触底期权时，似乎存在某种错误。删除它似乎可以解决问题：）

最后，不需要$（document）.ready（），因为AngularJS docs声明：

Angular会在DOMContentLoaded事件发生时或在计算Angular.js脚本时自动初始化，如果此时document.readyState设置为“complete”

此外，我还更改了具有sticky类的元素，但只是出于显示目的，如果您恢复更改，它也可以正常工作（当时它没有边框）

---

Plunk:

你知道我如何在被卡住的元素和他下面的元素之间始终保持一个空格或边距吗？看更新的Plunk：不完全确定你的意思。如果你在我的评论中看到新的Plunk。谷歌地图下方有一个空白底部：20px。但是，当您向上滚动时，此边距与地图下方的内容不匹配。我想滚动该内容，但在两个元素之间保留空白或任何空白。对不起，我看不到更改。。。你救了他们吗？我已经更新了列名以便澄清。地图和“粘性导航示例列2”之间应始终留有边距/填充。抱歉，意外复制了错误的plunk，