如果将元素位置动态更改为固定，则 $anchorScroll 会转到错误的位置答案

【问题标题】：$anchorScroll goes to wrong point if dynamically changing element position to fixed如果将元素位置动态更改为固定，则 $anchorScroll 会转到错误的位置
【发布时间】：2014-08-21 18:01:08
【问题描述】：

一旦我的标题滚动过去，我正在使用指令将我的菜单固定到页面顶部。我还希望我的菜单使用 $anchorScroll 导航到页面的不同元素。我遇到的问题是 $anchorScroll 会越过锚点，除非您滚动过标题。

var myApp = angular.module('myApp', ['sticky']);

    function IndexCtrl($scope, $location, $anchorScroll) {
    $scope.gotoDiv = function (id) {
        $scope.id = id;
        $location.hash(id);
        $anchorScroll();
    }
}

angular.module('sticky', [])
.directive('sticky', [ function () {
    return {
        restrict: 'A',

        link: function ($scope, $elem, $attrs) {
            var offsetTop = 0,
                $window = angular.element(window),
                initialPositionStyle = $elem.css('position'),
                stickyLine,
                scrollTop;

            // Set the top offset
            $elem.css('top', '0');
            $window.on('scroll', checkSticky);
            setInitial();

            function setInitial() {
                stickyLine = $elem[0].offsetTop;
                checkSticky();
            }

            function checkSticky() {
                scrollTop = window.pageYOffset;
                if (scrollTop >= stickyLine) {
                    $elem.css('position', 'fixed');
                } else {
                $elem.css('position', initialPositionStyle);
                }
            }
        }
    };
}]);

我创建了这个插件：http://plnkr.co/edit/7HfPtu4f1VoQ5vz4yVOJ?p=preview

-第一次点击菜单，滚动到很远。 - 第二次点击会带你到正确的位置。 - 滚动过去的标题，然后单击滚动到正确的位置。

【问题讨论】：

标签： angularjs scroll fixed

【解决方案1】：

在滚动发生之前需要将标题设置为固定。像这样：

var myApp = angular.module('myApp', ['sticky']);

function IndexCtrl($scope, $location, $anchorScroll) {
    $scope.gotoDiv = function (id) {
      $scope.stickyHeader();
      $scope.id = id;
      $location.hash(id);
      $anchorScroll();
    }

    $scope.stickyHeader = function () {
      service001.elem.css('position', 'fixed');
    }
}

var service001 = {

}

angular.module('sticky', [])
    .directive('sticky', [ function () {
        return {
            restrict: 'A',

            link: function ($scope, $elem, $attrs) {
                var offsetTop = 0,
                    $window = angular.element(window),
                    initialPositionStyle = $elem.css('position'),
                    stickyLine,
                    scrollTop;

                // Set the top offset
                $elem.css('top', '0');
                $window.on('scroll', checkSticky);
                setInitial();

                service001.elem = $elem;

                function setInitial() {
                    stickyLine = $elem[0].offsetTop;
                    checkSticky();
                }

                function checkSticky() {
                    scrollTop = window.pageYOffset;
                    if (scrollTop >= stickyLine) {
                      $elem.css('position', 'fixed');
                    } else {
                      $elem.css('position', initialPositionStyle);
                    }
                }
            }
        };
    }]);

这里应该有一个服务来分享elem.css的位置，但是确实有。

【讨论】：