javascript - 未从 div 下拉列表下的链接中删除类

标签 javascript jquery css

我在个人网站上工作。

在此站点中，当我滚动到与该导航链接相关的页面部分时，我希望导航链接变为事件状态，所有其他事件链接都应具有 nav-active 类已删除。

我让它部分工作，导航链接正确突出显示。我不明白为什么当滚动移动到 div 下拉按钮下的链接时，事件突出显示没有被删除。

任何人都可以指出我正确的方向，并指出一些关于这个问题的相关信息的教程/阅读(不是太高级)吗？

我的笔在这里:

https://codepen.io/pjsmyth/pen/ZvaZBO/

提前致谢

皮特

代码如下:

$(document).ready(function() {
      	
    	var scrollLink = $('.scroll');
    
    	// Smooth scrolling
    	scrollLink.click(function(e) {
    
    		e.preventDefault();
    		$('body,html').animate({
    			scrollTop: $(this.hash).offset().top
    		}, 1000 );
    	});
    
      // Active link switching
      $(window).scroll(function() {
        var scrollbarLocation = $(this).scrollTop();
        
        scrollLink.each(function() {
          
          var sectionOffset = $(this.hash).offset().top - 20;
          
          if ( sectionOffset <= scrollbarLocation ) {
            $(this).addClass('nav-active');
            $(this).siblings().removeClass('nav-active');
            $(this).children().removeClass('nav-active');
          }
        })
        
      })
    
    });
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/

/* CSS custom properties (variables) */
:root {
    --orange: #F9A828;
    --lightGrey: #ECECEB;
    --teal: #07617D;
    --darkGreyBlue: #2E383F;
    --darkGreyBlueTint: #718A9B;
}

* {
    margin: 0px;
    padding: 0;
    border: none;
    font-size: 1em;
    /*border: 1px red solid;*/
}

.hidden {
    display: none;
}

/*--------- Navigation Area ---------*/
body nav {
    height: 5vh;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    position: fixed;
    background-color: var(--darkGreyBlue);
    color: var(--lightGrey);
    z-index: 10;
}

.nav-active {
    color: var(--orange) !important;
    height: 5vh;
    /*border-width: 0;
    padding: 0 10px;
    float: right;*/
}

/*--------- Navigation Branding Area ---------*/
.branding {
    line-height: 5vh;
    float: left;
    height: 5vh;
    padding-left: 5%;
}

.branding i {
    float: left;
    padding-top: 1.6vh;
    color: var(--orange);
}

.branding div {
    display: inline;
    padding-left: 5px;
}

/*--------- Navigation Links Area ---------*/
.navLinks {
    padding-right: 5%;
    float: right;
}

.navLinks a {
    line-height: 5vh;
    float: none;
    color: var(--lightGrey);
    padding: 0px 10px;
    text-decoration: none;
    display: inline-block;
    text-align: left;
}



.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    border: none;
    outline: none;
    color: var(--lightGrey);
    line-height: 5vh;
    text-align: left;
    background-color: inherit;
    min-width: 75px;
    padding: 0 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    float: none;
    color: var(--orange);
    padding: 0px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--darkGreyBlue);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown a {
    float: none;
    height: 5vh;
    line-height: 5vh;
    text-decoration: none;
    background-color: var(--darkGreyBlue);
    border-width: 0;
    color: var(--lightGrey);
    padding: 0 10px;

}

.navLinks a:hover, .dropdown:hover .dropbtn {
    color: var(--orange);
    /*color: var(--darkGreyBlue);*/
}

/*--------- Splashscreen Area ---------*/
body div.splashScreen {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Raleway', sans-serif;
    color: var(--lightGrey);
    text-align: center;
}

body div.splashScreen div.splashText {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

body div.splashScreen div.splashText h1 {
    font-family: 'Oleo Script', cursive;
    font-size: 7em;
    padding-bottom: 10px;

}

body div.splashScreen div.splashText a button {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--darkGreyBlueTint);
    border-radius: 20px;
    border: 1px solid var(--lightGrey);
    color: var(--lightGrey);
    transition: all 0.5s ease-in;
}

body div.splashScreen div.splashText a button:hover {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--lightGrey);
    border-radius: 20px;
    border: 1px solid var(--darkGreyBlueTint);
    color: var(--darkGreyBlueTint);
}

body div.splashScreen div.splashText a button:active {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--darkGreyBlueTint);
    border-radius: 20px;
    color: var(--lightGrey);
}

/*--------- About Area ---------*/
body div.aboutPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.aboutPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Experience Area ---------*/
body div.experiencePage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.experiencePage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Skills Area ---------*/
body div.skillsPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.skillsPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Portfolio Area ---------*/
body div.portfolioPage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.portfolioPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Photography Area ---------*/
body div.photographyPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.photographyPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Favourites Area ---------*/
body div.favouritesPage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.favouritesPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
    <head>
    <meta charset="UTF-8">
        <title>Personal Website of Pete</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
        <link rel="stylesheet" href="css/custom.css">
        <script src="https://use.fontawesome.com/71da83f6b4.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="./js/custom.js"></script>
    </head>

<body>
    <!--  Start Navigation Section -->
    <nav>
        <span class="branding">
            <i class="fa fa-hand-peace-o" aria-hidden="true"></i>
            <div>Pete Smyth</div>
        </span>
        <div class="navLinks">
            <div class="dropdown">
                <button class="dropbtn">Interests&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
                </button>
                <div class="dropdown-content">
                    <a class="scroll" href="#bk-photography">Photography</a>
                    <a class="scroll" href="#bk-favourites">Favourites</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Resume&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
                </button>
                <div class="dropdown-content">
                    <a class="scroll" href="#bk-resume-experience">Experience</a>
                    <a class="scroll" href="#bk-resume-skills">Skills</a>
                    <a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
                </div>
            </div>
            <a class="scroll nav-active" href="#bk-splash">Home</a>
            <a class="scroll" href="#bk-about">About</a>

        </div>          
    </nav>
    <!--  End Navigation Section -->

    <!--  Start Splashscreen Section -->
    <div id="bk-splash" class="splashScreen">
        <div  class="splashText">
            <h1>
                Pete Smyth
            </h1>
            <a href="#bk-about"><button>Learn More</button></a>
        </div>
        <!-- end of splashText class -->
    </div>
    <!--  End Splashscreen Section -->

    <!--  Start About Section -->
    <div id="bk-about" class="aboutPage">
        <header>
            <h1>Here's the Goss</h1>
        </header>

    </div>
    <!--  End About Section -->

    <!--  Start Resume Experience Section -->
    <div id="bk-resume-experience" class="experiencePage">
        <header>
            <h1>Pete's Experiences</h1>
        </header>

    </div>
    <!--  End Resume Experience Section -->

    <!--  Start Resume Skills Section -->
    <div id="bk-resume-skills" class="skillsPage">
        <header>
            <h1>Pete's Skills</h1>
        </header>

    </div>
    <!--  End Resume Skills Section -->

    <!--  Start Portfolio Section -->
    <div id="bk-resume-portfolio" class="portfolioPage">
        <header>
            <h1>Pete's Portfolio</h1>
        </header>

    </div>
    <!--  End Portfolio Section -->

    <!--  Start Photography Section -->
    <div id="bk-photography" class="photographyPage">
        <header>
            <h1>Pete's Photography</h1>
        </header>

    </div>
    <!--  End Photography Section -->

    <!--  Start Favourites Section -->
    <div id="bk-favourites" class="favouritesPage">
        <header>
            <h1>Pete's Favourites</h1>
        </header>

    </div>
    <!--  End Favourites Section -->
</body>

最佳答案

我想你希望 .dropbtn 在它下面的 .scroll 被高亮时高亮...

可能有几种方法可以做到这一点。 但是由于部分 (div) 具有固定的偏移量，您可以将它们全部放在一个数组中，在加载时......然后将它们与滚动位置进行比较。

当我们有一个“匹配项”时，从另一个保存 id 的数组中获取它的 id 并立即退出该循环。

这是脚本:

$(document).ready(function() {

  var scrollLink = $('.scroll');
  var dropbtn = $(".dropbtn");

  // Smooth scrolling
  scrollLink.click(function(e) {
    e.preventDefault();
    $('body,html').animate({
      scrollTop: $(this.hash).offset().top
    }, 1000 );
  });

  // Get all section position and id
  var sectionArr = [];
  var sectionId = [];
  $("body>div").each(function(){
    console.log($(this).attr("id") + " " + $(this).offset().top);
    sectionArr.push($(this).offset().top-20);
    sectionId.push($(this).attr("id"));
  });

  // Add the full page height to the array for the comparison of the last section
  sectionArr.push($("body").height());

  // Active link switching
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();

    // Remove the class everywhere
    scrollLink.removeClass('nav-active');
    dropbtn.removeClass('nav-active');

    // Compare the scrolled position with the offsets stored in array until we find.
    for(i=0;i<sectionArr.length;i++){
      var target = $(".scroll[href='#"+sectionId[i]+"']");

      // if the scrolled position is more than a section position, BUT less than the next
      if(scrollbarLocation>sectionArr[i] && scrollbarLocation<sectionArr[i+1]){
        // add the highlight class
        target.addClass("nav-active");
        if(target.parent().is(".dropdown-content")){
          // add the highlight class to the dropdown button
          target.closest(".dropdown").find(".dropbtn").addClass('nav-active');
        }
        break;  // Exit the loop on match
      }
    } // End for loop

  }); // End on scroll

}); // End ready

CodePen

注意您可以调整“触发点”，以便在显示超过一半的部分时出现菜单突出显示，我真的认为这样会更好!

只需更新这一行:

sectionArr.push($(this).offset().top-20 - ($(this).height()/2));

关于javascript - 未从 div 下拉列表下的链接中删除类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48139068/

上一篇：jquery - 如何将 Bootstrap Datepicker anchor 位置更改为居中？

下一篇：javascript - 过渡不适用于渐变填充

相关文章：

javascript - 如何在 chrome 中设置 DOM 断点

javascript - 拖动 DIV 时不触发函数

javascript - 在 React 中使用 onClick 事件处理程序

jquery - 我想通过 css 将鼠标悬停在 anchor 标记上时显示 div

javascript - 来自指令 Controller 的 Angular 调用 Controller 函数

php - 无法加载 localhost php 文件的源代码

javascript - 发出ajax请求获取一些数据，然后重定向到一个新页面，传递返回的数据

javascript - 如何使用滚动模糊元素，直到它模糊到某个点？

css - 为所有 div 添加clearfix 有什么缺点吗？

html - 将两个表居中，添加间隙并保持 HTML 对齐

©2024 IT工具网  联系我们