Question

我的标题滚动过后，我使用指令将菜单修复到页面顶部。我也希望我的菜单使用$ 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);
                }
            }
        }
    };
}]);

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

- 第一次单击菜单，滚动到远处。 - 第二次单击会显示正确的位置。 - 滚过标题，然后点击滚动到正确的位置。

Answer 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位置，但它就是。

如果将元素位置动态更改为fixed，$ anchorScroll将转到错误的位置

1 个答案: