在AngularJS中用Sticky-kit实现粘性Div的指定位置释放

我完全理解你的需求——左列的粘性Div要在滚动到右列#release-stick元素的底部时，自动解除固定状态。你现在已经能实现基础的粘性效果，但问题出在没有正确配置Sticky-kit的参数，也没有针对目标元素的位置做自定义的滚动判断。

下面是具体的解决方案，我会一步步修改你的代码并解释原因：

核心问题分析 #

Sticky-kit默认是基于父容器的底部来触发"停止粘性"的逻辑，但你的需求是基于另一列的指定元素位置，所以需要我们手动计算目标位置，结合滚动监听来控制粘性状态的开启与关闭。

修改后的代码实现 #

1. 更新AngularJS指令代码 #

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!");
    // 用$(function())替代document.ready，因为Angular指令执行时DOM已就绪
    $(function() {
      var $stickElement = $(".stick");
      var $releaseTarget = $("#release-stick");
      
      // 计算目标元素的底部位置：元素顶部偏移 + 元素自身的完整高度（包括padding、border）
      var releaseBottom = $releaseTarget.offset().top + $releaseTarget.outerHeight();
      
      // 初始化Sticky-kit，开启bottoming模式（处理基础粘性逻辑）
      $stickElement.stick_in_parent({
        bottoming: true,
        parent: '.column-one' // 指定左列容器为父元素，确保基础粘性的正确范围
      });
      
      // 监听窗口滚动事件，判断是否到达释放点
      $(window).on("scroll", function() {
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        // 视口底部的位置 = 当前滚动距离 + 窗口高度
        var viewportBottom = scrollTop + windowHeight;
        
        // 当视口底部超过目标元素的底部时，解除粘性
        if (viewportBottom >= releaseBottom) {
          if ($stickElement.data("sticky_kit")) { // 避免重复销毁
            $stickElement.stick_in_parent("destroy");
          }
        } else {
          // 如果还没到释放点，且粘性已被销毁，重新初始化
          if (!$stickElement.data("sticky_kit")) {
            $stickElement.stick_in_parent({
              bottoming: true,
              parent: '.column-one'
            });
          }
        }
      });
    });
  };
  return {
    link: link
  };
});

2. 关键修改点说明 #

• 替换document.ready：AngularJS指令在绑定到DOM元素时，该元素已经处于就绪状态，所以用$(function())更合适，避免不必要的等待。
• 计算目标元素底部位置：通过offset().top获取元素相对于文档顶部的偏移，加上outerHeight()（包含padding和border的高度），得到元素的底部位置。
• 开启bottoming模式：让Sticky-kit处理基础的粘性到父容器底部的逻辑，同时我们叠加自定义的滚动判断。
• 滚动监听逻辑：实时计算视口底部的位置，当它超过目标元素底部时，调用stick_in_parent("destroy")解除粘性；如果回到释放点上方，重新初始化粘性效果。

3. CSS保持不变（可微调） #

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

效果验证 #

修改后，当你滚动页面到#release-stick元素的底部时，左列的粘性Div会自动停止固定，跟随页面一起滚动；如果向上滚动回到该元素上方，Div会重新恢复粘性状态。

内容的提问来源于stack exchange，提问作者Rober