Question

您好我有一个单页网站，在导航中使用平滑滚动我还设置了一个功能，当点击链接时应用活动类并将其从otehr链接中删除但有没有办法添加活动根据您在页面上的位置，将类分类到正确的链接，例如如果我滚动到节能部分，主导航将增加一个活动类来节能。

这是我用于平滑滚动的代码。

var smoothScroll = function() {
            $('a[href*=#]:not([href=#])').click(function() {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html,body').animate({
                            scrollTop: target.offset().top - $('.fd_PageHeader').height() - 40
                        }, 1000);
                        $('body').removeClass('navVisible navTransition');
                        return false;

                    }

                }
            });
        };

Answer 1

DIY解决方案：

注册onScroll侦听器，并为每个回调将当前滚动位置与标题的垂直位置进行比较。

$(document).scroll(function(){ /* callback here */ });

可以使用jQuery.scrollTop()检索垂直滚动位置。在比较之前，标题的topOffset（offset().top）需要与当前窗口高度$(window).height();组合。

在此处查看POC版本http://jsfiddle.net/b1bc7wbL/

简易解决方案：

使用第三方模块，例如http://getbootstrap.com/javascript/#scrollspy

单页滚动根据滚动位置添加活动类

1 个答案: