使用 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

代码存在三个问题。首先，考虑到你使用的是浮点数，你需要在 #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 state:

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

此外，我更改了具有粘性的元素 class 但只是为了显示目的，如果您恢复更改（那时它只是没有边框），它也能正常工作。

笨蛋：https://plnkr.co/edit/h3ws1pckAHxk9T0JlnMJ?p=preview

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

Stick a div with Sticky-kit and release it in an specific point in AngularJS

javascript

jquery

sticky

angularjs