Question

我目前在我的网站上有一个导航栏，其中有4个锚链接，可将您链接到单页Web应用程序上的各个位置。当您导航到页面的特定部分时，特定的导航锚点链接会亮起，表示您确实位于网站的特定部分。

亲眼看看......
MY WEBSITE
请注意当您向下滚动到不同的部分时，侧栏上的导航链接按钮会发生变化。

我以一种非常笨重的丑陋不太干净的方式成功地做到了这一点。当用户滚动到页面上各自的范围时，我制作了4个指令来更改每个单独的按钮。

有谁知道如何制作更清晰，更优雅的指令来完成同样的任务？

这是我的HTML

<div id='dots-menu-nav'>
    <nav id='vertical-dots-menu'>
        <ul>
            <li class='nav-li'>
                <a href="" ng-click='landingControl.goToAnchor("mystory")' class='dots-menu-anchor'><span about-location class='dots-menu-dot'></span><span class='dots-menu-label'>ABOUT</span></a>
            </li>
            <li class='nav-li'>
                <a href="" ng-click='landingControl.goToAnchor("contact-tag")' class='dots-menu-anchor'><span tech-location class='dots-menu-dot'></span><span class='dots-menu-label'>TECHNOLOGIES</span></a>
            </li>
            <li class='nav-li'>
                <a href="" ng-click='landingControl.goToAnchor("projects")' class='dots-menu-anchor'><span project-location class='dots-menu-dot'></span><span class='dots-menu-label'>PROJECTS</span></a>
            </li>
            <li class='nav-li'>
                <a href="" ng-click='landingControl.goToAnchor("contact")' class='dots-menu-anchor'><span contact-location class='dots-menu-dot'></span><span class='dots-menu-label'>CONTACT</span></a>
            </li>
        </ul>
    </nav>
</div>

这是我的CSS ...

.border-black{
    border: 2px solid black;
}

.dots-menu-dot{
    position: relative;
    display: inline-block;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: white;
    float: right;
}

li:hover .dots-menu-dot{
    transform: scale(1.1);
    transition: background 0.215s ease-in-out 0s, transform 0.215s ease-in-out 0s, border 0.215s ease-in-out 0s;
    background-color: black;
    border: 2px solid white;
}

li:hover .dots-menu-label{
    color: white;
    top: 1px;
    font-family: 'WSBold'
}

以下是我的指示（大量重复）......

myModule.directive('aboutLocation', function($window){
return {
        link: function(scope, element){
            angular.element($window).bind("scroll", function() {
            var topOfScreen = $window.scrollY;
            var aboutWrap = angular.element('#mystory');
            var techWrap = angular.element('.tech-wrap');

            if(aboutWrap[0].offsetTop - 100 <= topOfScreen && topOfScreen < techWrap[0].offsetTop - 200){
                element.addClass('border-black');
            }else{
                element.removeClass('border-black');
            }
            scope.$apply();
        });
    }
}
})

myModule.directive('techLocation', function($window){
    return {
            link: function(scope, element){
                angular.element($window).bind("scroll", function() {
                var topOfScreen = $window.scrollY;
                var projectWrap = angular.element('#projects');
                var techWrap = angular.element('.tech-wrap');

                if(techWrap[0].offsetTop - 200 <= topOfScreen && topOfScreen < projectWrap[0].offsetTop - 200){
                element.addClass('border-black');
            }else{
                element.removeClass('border-black');
            }
            scope.$apply();
        });
    }
}
})

myModule.directive('projectLocation', function($window){
    return {
            link: function(scope, element){
                angular.element($window).bind("scroll", function() {
                var topOfScreen = $window.scrollY;
                var projectWrap = angular.element('#projects');
                var contactWrap = angular.element('#contact');

                if(projectWrap[0].offsetTop - 200 <= topOfScreen && topOfScreen < contactWrap[0].offsetTop - 200){
                element.addClass('border-black');
                }else{
                    element.removeClass('border-black');
                }
                scope.$apply();
            });
        }
    }
})

myModule.directive('contactLocation', function($window){
    return {
            link: function(scope, element){
                angular.element($window).bind("scroll", function() {
                var topOfScreen = $window.scrollY;
                var contactWrap = angular.element('#contact');

                if(contactWrap[0].offsetTop - 200 <= topOfScreen){
                    element.addClass('border-black');
                }else{
                    element.removeClass('border-black');
                }
                scope.$apply();
            });
        }
    }

提前感谢您提供的任何帮助。

Answer 1

首先制作导航数组[{name：...，id：...}，{}]。并使用ng-repeat。第二个是关于父母＆＃39; ul＆＃39;这实际上与你的指令或多或少相同。你只需要添加循环。第三个存储当前活动元素，启动范围。$仅在更改时才适用。

有没有更简洁的方法来使用Angular指令实现页面位置感知？

1 个答案: