Question

我有一个带锚链接的固定顶级菜单。当我向下滚动时，活动链接会突出显示，然后被删除。工作良好。问题：活动链接没有为所有div长度保持“活动”类：一旦锚点由于滚动而向上移动，链接的状态就不再“活动”。

在我们到达下一个div之前，有没有办法让链接保持活动状态？感谢。

JS代码：

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

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

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

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

 function onScroll(event){
 var scrollPos = $(document).scrollTop();
 $('#wrapmenu a[href*=#]:not([href=#])').each(function () {
 var currLink = $(this);
 var refElement = $(currLink.attr("href"));
 if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
    $('#wrapmenu a').removeClass("active"); //added to remove active class from all a elements
    currLink.addClass("active");
 }
 else {
    currLink.removeClass("active");
 }
 });
 }

CSS：

.menu-navigation-icons {
font-family: 'Raleway', Arial, Helvetica, sans-serif;
text-align: center;
font-size: 0;
margin-top: 0 !important;
}

.menu-navigation-icons a {
display: inline-block;
color: #fff;
background-color: #232526;
font-size: 40px;
font-weight: bold;
box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.1);
border-right: 1px solid #1d6391;
text-decoration: none;
white-space: nowrap;
font-family: 'Raleway' !important;
font-size: 38pt;
width: 15%;
height: 125px;
}

.firsta { border-left: 1px solid #1d6391; }

.menu-navigation-icons a:hover {
opacity: 0.92;
}

.active {
background-color: #1d6391 !important;
}

.menu-navigation-icons a i {
display: block;
line-height: 2;
}

.menu-navigation-icons a span {
display: block;
font-family: 'Teko' !important;
font-size: 24pt;
letter-spacing: 1px;
line-height: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* section */
.section {
background: #fff;
color: #222;
padding: 10px 0;
width: 95%;
margin: 0 auto;
height: auto;
}

#section-2, #section-3, #section-4, #section-5 {
padding: 0;
width: 95%;
margin: 0;
height: 125px;
}

MENU：

<div id="wrapmenu"><nav class="menu-navigation-icons">
<a href="home.php" class="menu-blue firsta"><i class="fa fa-car"></i><span>xxxxx</span></a>
<a href="#section-2" class="menu-blue"><i class="fa fa-folder-open-o"></i><span>xxxxx</span></a>
<a href="#section-3" class="menu-blue"><i class="fa fa-calendar"></i><span>xxxxx</span></a>
<a href="#section-4" class="menu-blue"><i class="fa fa-clock-o"></i><span>xxxxx</span></a>
<a href="#section-5" class="menu-blue"><i class="fa fa-cc-visa"></i><span>xxxxx</span></a>
<a href="logout.php" class="menu-blue"><i class="fa fa-power-off"></i><span>Log Out</span></a>
</nav></div>

编辑：找到了完成这项工作的方法！这是代码，如果它对任何人都有任何帮助^^

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

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

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

    var target = this.hash,
    menu = target;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 1000, 'easeInQuad', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
});
});

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#wrapmenu a[href*=#]:not([href=#])').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
var target = refElement.position().top + 125;

if(scrollPos >= target){
         //remove active from all anchor and add it to the clicked anchor
        $('#wrapmenu a[href*=#]:not([href=#])').removeClass("active")
        $(this).addClass('active'); 
    }
});
}

滚动时如何保持活动链接突出显示

0 个答案: