Question

我正在使用这两个脚本，一个是在单击锚标记时更改类，另一个是在向下滚动页面时更改类。当我单击锚标记时，类会更改，但由于滚动功能，它会恢复，我也会动画到我的滚动页面。我怎样才能避免两者之间的冲突。

根据锚更改类。

<script>
$(document).ready(function () {
$('.sidebar-nav li a').click(function(e) { 
$('.sidebar-nav li').removeClass('active_nav');
var $parent = $(this).parent();
if (!$parent.hasClass('active_nav')) {
$parent.addClass('active_nav');
}
e.preventDefault();});});   
</script>

根据滚动更改课程

<script>
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
    $('.page').each(function(i) {
        if ($(this).position().top <= windscroll) {
            $('.sidebar-nav li').removeClass('active_nav');
            $('.sidebar-nav li').eq(i).addClass('active_nav');
        }
    });});  
</script>

滚动到页面

<script>
$('.scroll a').click(function(e) {
var goTo = $(this).attr('href'); // selects element that was clicked
$("html,body").animate({scrollTop:$(goTo).offset().top}, 1000);
e.preventDefault();
}); 
</script>

Answer 1

如果$(this).position().top + $(this).height() > windscroll，您应该添加一个条件。

$(window).scroll(function() {
var windscroll = $(window).scrollTop();
$('.page').each(function(i) {
    var posTop = $(this).position().top, 
        h = $(this).height();

    if (posTop  <= windscroll && posTop + h > windscroll ) {
        $('.sidebar-nav li').removeClass('active_nav');
        $('.sidebar-nav li').eq(i).addClass('active_nav');
    }
});
});

导航滚动和单击锚标记

1 个答案: