Question

我有一个包含两列的网页。我想在左列中粘贴div，直到用户向下滚动到右列中元素的特定末尾。我正在尝试使用Jquery库Sticky-kit http://leafo.net/sticky-kit/。我能够坚持div，但是当我点击右栏元素的末尾时，我无法释放它。 Jquery代码在AngularJS指令中（虽然我认为它不会影响问题）。

找到一个plunker：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

代码有三个问题。首先，考虑到您正在使用浮点数，您需要在clear的末尾添加一个#release-sticky属性的元素（或使用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设置为“完成”。

此外，我更改了具有粘性类的元素，但仅用于显示目的，如果您还原更改（它只是没有边框），它也可以正常工作。

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

使用Sticky-kit粘贴div并将其释放到AngularJS中的特定点

1 个答案: