导航链接应在滚动时为特定部分激活

Posted 2023-05-08

【中文标题】导航链接应在滚动时为特定部分激活

【英文标题】：Nav links should active for a particular section while scrolling

【发布时间】：2020-08-07 19:50:21

【问题描述】：

我有一个多页网站，导航栏上有四个链接。在四个链接中，两个链接重定向到其他新页面。在我的登录页面上有一段与这些链接相关的内容。我也想启用这些。请在这种情况下帮助我直到今天实现的代码

<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>

<nav class="navigation" id="mainNav">
            <a class="navigation__link" href="#1">home</a>
            <a class="navigation__link" href="#2">about</a>
            <a class="navigation__link" href="test.html">test</a>
            <a class="navigation__link" href="#test1.html">test1</a>
</nav>

<div class="page-section home" id="1">
            <h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section about" id="2">
            <h1>Section Two</h1>
</div>
<div class="page-section" id="3">
            <h1>Section Three</h1>
</div>
<div class="page-section" id="4">
            <h1>Section Four</h1>
</div>
<div class="page-section test" id="5">
            <h1>Section Five</h1>
</div>
<div class="page-section test1" id="6">
            <h1>Section Six and this section is test section</h1>
</div>
<div class="page-section" id="7">
            <h1>Section Seven and this section is test1</h1>
</div>


*  
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    transition: all .1s ease; 


html, body 
        height: 100%;


h1  font-size: 64px; 

.page-section 
        height: 480px;
        width: 50%;
        margin-left: 35%;
        margin-top: 5%;
        padding: 3em;
    background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
        color: white;
        box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);


.navigation 
    position: fixed; 
        width: 30%;
        margin-left: 2%;
    background-color: #999;
    color: #fff;

    &__link 
            display: block;
        color: #ddd; 
        text-decoration: none;
        padding: 1em;
            font-weight: 400;

            &:hover 
                background-color: #aaa;
            

           &.active 
            color: white;
                 background-color: rgba(0,0,0,0.1);
           
    



$(document).ready(function() 
        $('a[href*=#]').bind('click', function(e) 
                e.preventDefault(); // prevent hard jump, the default behavior

                var target = $(this).attr("href"); // Set the target as variable

                // perform animated scrolling by getting top-position of target-element and set it as scroll target
                $('html, body').stop().animate(
                        scrollTop: $(target).offset().top
                , 600, function() 
                        location.hash = target; //attach the hash (#jumptarget) to the pageurl
                );

                return false;
        );
);

$(window).scroll(function() 
        var scrollDistance = $(window).scrollTop();

        // Show/hide menu on scroll
        //if (scrollDistance >= 850) 
        //      $('nav').fadeIn("fast");
        // else 
        //      $('nav').fadeOut("fast");
        //

        // Assign active class to nav links while scolling
        $('.page-section').each(function(i) 
                if ($(this).position().top <= scrollDistance) 
                        $('.navigation a.active').removeClass('active');
                        $('.navigation a').eq(i).addClass('active');
                
        );
).scroll()

【参考方案1】：

关于何时应该发生的更多自定义分配，有一个（非常古老但仍在工作的）jQuery 插件。见：

Github: jquery.inviewTutorial: Element 'in view' Event Plugin

用法：

$('#mySection1').on('inview', function(event, isInView) 
  if (isInView) 
    $('#myNavOption1').addClass('active');
   else 
    $('#myNavOption1').removeClass('active');
  
);

【讨论】：

如果这个答案有帮助并且您用它来解决您的问题，如果您将此答案标记为已接受，那就太好了。它不仅可以帮助我，还可以帮助其他有相同问题并在搜索时遇到此问题的人。

【参考方案2】：

你正在寻找的是一个滚动间谍：

Scrollspy · Bootstrap

或者，如果这不适合您，只需谷歌“scrollspy”并找到其他可能更适合您的框架。

【讨论】：

这是自第 4 版以来 Bootstrap 中的一项功能。另请参见 ***.com/questions/18244186 on scrollspies in v3

@sandysharma 如果这有帮助并且您使用此答案来解决您的问题，那么如果您将该答案标记为已接受，那就太好了。仅当您愿意时才有意义。

@odd_wizard 我的要求不同。某些导航链接应仅对特定部分有效。例如，我有 4 个导航链接，我家中有 7 个部分，这 4 个部分只有它们应该处于活动状态。请帮帮我

@NiklasE。我的要求不一样。在导航栏中，我有指向主页和其他页面部分的链接。当我滚动主页时​​，链接到新页面摘要内容的部分在主页中。我希望导航栏链接应该在特定部分处于活动状态。

@sandysharma 好的，我打开了另一个可能更适合您的答案。