javascript - 使用 Sticky-kit 粘贴 div 并在 AngularJS 中的特定点释放它

Question

我有一个包含两栏的网页。我想在左列中粘贴一个 div，直到用户向下滚动到右列中元素的特定末尾。我正在尝试使用 Jquery 库 Sticky-kit http://leafo.net/sticky-kit/ 。我可以粘住 div，但当我到达右列元素的末尾时无法释放它。 Jquery 代码位于 AngularJS 指令内(尽管我认为它不会影响问题)。

寻找骗子:https://plnkr.co/edit/6tT6408OY530b6hYflDL?p=preview

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>

JS:

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
    };
});

CSS:

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

Answer 1

代码存在三个问题。首先，考虑到您使用的是 float ，您需要在 #release-sticky 末尾添加一个具有 clear 属性的元素(或使用 css 清除修复)。所以基本上是这样的:

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

这背后的原因是，当您使用 float 时，并且之后不清除，浏览器不会为父级分配高度。 (所以基本上你的 #release-sticky 的高度为 0)。

其次，使用触底选项时似乎存在某种错误。删除它似乎可以解决问题:)

最后，不需要 $(document).ready() 因为，正如 AngularJS 文档所述:

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'.

此外，我更改了具有粘性类的元素，但只是为了显示目的，如果您恢复更改(它只是没有边框)，它也同样有效。

普朗克:https://plnkr.co/edit/h3ws1pckAHxk9T0JlnMJ?p=preview