Question

我已经创建了一个导航工具，可以根据此示例教程中的页面部分更改活动类： http://stanhub.com/tutorials/change-active-state-in-sticky-navigation-on-scroll/

我的问题是：如何修改此代码以删除/阻止主题标签锚链接标题显示在浏览器网址中？

我目前的工作是：

$j(document).ready(function () {
    $j(document).on("scroll", onScroll);

    //smoothscroll
    $j('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $j(document).off("scroll");

        $j('a').each(function () {
            $j(this).removeClass('active');
        })
        $j(this).addClass('active');

        var target = this.hash,
            menu = target;
        $jtarget = $j(target);
        $j('html, body').stop().animate({
            'scrollTop': $jtarget.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $j(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $j(document).scrollTop();
    $j('#slide-nav a').each(function () {
        var currLink = $j(this);
        var refElement = $j(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $j('#slide-nav a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

Answer 1

我认为是这样的事情：

var t = null;
$j('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $j(document).off("scroll");

    $j('a').each(function () {
        $j(this).removeClass('active');
    })
    $j(this).addClass('active');
    t = $(this).attr('href');
    var target = t,
        menu = target;
    $jtarget = $j(target);
    $j('html, body').stop().animate({
        'scrollTop': $jtarget.offset().top+2
    }, 500, 'swing', function () {
        t = target;
        $j(document).on("scroll", onScroll);
    });
});
});

function onScroll(event){
var scrollPos = $j(document).scrollTop();
$j('#slide-nav a').each(function () {
    var currLink = $j(this);
    var refElement = $j(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $j('#slide-nav a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});
}

Answer 2

这是对我有用的代码：

    $j(document).ready(function () {
    $j(document).on("scroll", onScroll);

   var t = null;
   $j('a[href^="#"]').on('click', function (e) {
       e.preventDefault();
       $j(document).off("scroll");

       $j('a').each(function () {
           $j(this).removeClass('active');
       })
       $j(this).addClass('active');
       t = $j(this).attr('href');
       var target = t,
           menu = target;
       $jtarget = $j(target);
       $j('html, body').stop().animate({
           'scrollTop': $jtarget.offset().top+2
       }, 500, 'swing', function () {
           t = target;
           $j(document).on("scroll", onScroll);
       });
   });
   });

   function onScroll(event){
   var scrollPos = $j(document).scrollTop();
   $j('#slide-nav a').each(function () {
       var currLink = $j(this);
       var refElement = $j(currLink.attr("href"));
       if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
           $j('#slide-nav a').removeClass("active");
           currLink.addClass("active");
       }
       else{
           currLink.removeClass("active");
       }
   });
   }

如何在用户滚动时添加活动类而不使用锚链接URL

2 个答案: