使用Sticky-kit粘贴div并将其释放到AngularJS的特定位置 [英] Stick a div with Sticky-kit and release it in an specific point in AngularJS

问题描述

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

I have a webpage with two columns. I want to stick a div in the left column until the user scrolls down to an specific end of an element in the right column. I´m trying to use the Jquery library Sticky-kit http://leafo.net/sticky-kit/ . I´m able to stick the div, but I cannot release it when I hit the end of the element of the right column. The Jquery code is inside an AngularJS directive (although I think it doesn´t affect to the problem).

找到一个朋克: 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}

推荐答案

该代码存在三个问题.首先，考虑到您正在使用浮点数，需要在#release-sticky的末尾添加具有clear属性的元素(或使用css clearfix).所以基本上像这样:

There are three problems with the code. First of all, considering you are using floats, you need to add an element with clear property at the end of the #release-sticky (or use a css clearfix). So basically something like:

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

其背后的原因是，当您使用浮点数并且此后不清除时，浏览器不会为父级分配高度. (因此，您的#release-sticky的高度基本上为0).

The reason behind this is that when you use floats, and don't clear afterwards, the browser doesnt allocate height for the parent. (so basically your #release-sticky has 0 height).

其次，在使用打底选项时，似乎会出现某种错误.删除它似乎可以解决问题:)

Secondly, there appears to be some kind of error when using the bottoming option. Removing it seems to fix the problems :)

最后，由于AngularJS文档指出:

Lastly, there is no need for $(document).ready() since, as AngularJS docs state:

如果当时将document.readyState设置为"complete"，则Angular将在DOMContentLoaded事件或评估angular.js脚本时自动初始化.

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

此外，我更改了具有粘性类的元素，但仅出于显示目的，如果您还原更改(则它没有边框)，它也可以正常工作.

Also, i changed the element that had sticky class but just for display purposes, it works just as well if you revert the change (it just has no border then).

随便听: https://plnkr.co/edit/h3ws1pckAHxk9T0JlnMJ?p=preview

这篇关于使用Sticky-kit粘贴div并将其释放到AngularJS的特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！