使用jQuery滚动时在div之间切换

我正在尝试创建一个投资组合页面。我使用的技术是HTML，CSS和jQuery。但是，我陷入了一个涉及上下滚动页面的问题。 ü看到，当我向下滚动时，我想在导航栏链接上添加一个类，对应于我在页面上的div。当它发生时，在某种程度上，在向下滚动时，它只是在滚动时出现混乱。使用jQuery滚动时在div之间切换

以下是我的代码..

$(document).ready(function(){ 
 
    
 
    $(".navbar-links").click(function(){ 
 
    $(".navbar-links").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
    
 
    var portfolio_offset = $("#portfolio-section").offset().top; 
 
    
 
    var about_offset = $("#about-section").offset().top; 
 
    
 
    var contact_offset = $("#contact-section").offset().top; 
 
    
 
    $(window).scroll(function(){ 
 
    $(".navbar-links").removeClass("active"); 
 
    //var scrolled_offset = window.pageYOffset; 
 
    var scrolled_offset = $(this).scrollTop(); 
 
    if(scrolled_offset>=contact_offset) 
 
     { 
 
     $("#contact_link").addClass("active"); 
 
     } 
 
    else if(scrolled_offset>=portfolio_offset) 
 
     { 
 
     $("#portfolio_link").addClass("active"); 
 
     } 
 
    else 
 
     { 
 
     $("#about_link").addClass("active"); 
 
     } 
 
    }); 
 
    
 
    $("button").click(function(){ 
 
    window.open($(this).val(),"_blank"); 
 
    }); 
 
    
 
});

button { 
 
    background : transparent; 
 
    border : 1px solid white; 
 
    padding : 0px; 
 
    margin : 10px; 
 
} 
 

 
i { 
 
    border : 0px; 
 
} 
 

 
#about-section { 
 
    background-color : #fd746c; 
 
    color : black; 
 
} 
 

 
#portfolio-section { 
 
    background-color : #904e95; 
 
    color : black; 
 
} 
 

 
#contact-section { 
 
    background-color : #4ca1af; 
 
    color : black; 
 
} 
 

 
.active { 
 
    border : 1px solid white; 
 
} 
 

 
#navbar-menu { 
 
    text-align : center; 
 
} 
 

 
.heading { 
 
    font-family : Sofia; 
 
} 
 

 
.navbar { 
 
    background-color : black; 
 
} 
 

 
.content { 
 
    font-family : Lily Script One; 
 
} 
 

 
.navbar-brand { 
 
    font-size : 27px; 
 
} 
 

 
.content-div { 
 
    text-align : center; 
 
    display : inline-block; 
 
    vertical-align : middle; 
 
    float : none; 
 
} 
 

 
.navbar-links { 
 
    font-size : 20px; 
 
} 
 

 
.center { 
 
    text-align : center; 
 
} 
 

 
img { 
 
    border : 1px solid white; 
 
    margin : auto; 
 
    top : 0; 
 
    left : 0; 
 
    right : 0; 
 
    bottom : 0; 
 
} 
 

 
.project-img { 
 
    max-width : 70%; 
 
    max-height : 70%; 
 
} 
 

 
.fa { 
 
    padding : 20px; 
 
    font-size : 45px; 
 
    width : 100px; 
 
    text-align : center; 
 
    text-decoration : none; 
 
    background : #2c4762; 
 
    color: white; 
 
    margin : 0px 0px; 
 
    border : 1px solid white; 
 
} 
 

 
.fa:hover { 
 
    opacity : 0.7; 
 
}

<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="row" id="navbar-section"> 
 
     <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10"> 
 
     <div class="navbar-header heading"> 
 
      <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"><span class="glyphicon glyphicon-triangle-bottom"></span></button> 
 
      <a href="#" class="navbar-brand">Portfolio Page</a> 
 
     </div> 
 
     <div id="navbar-menu" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right heading"> 
 
      <li class="navbar-links active" id="about_link"><a href="#about-section">About</a><li> 
 
      <li class="navbar-links" id="portfolio_link"><a href="#portfolio-section">Portfolio</a><li> 
 
      <li class="navbar-links"><a href="#contact-section" id="contact_link">Contact</a><li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container-fluid" id="scrollable-div"> 
 
    <div class="row" id="about-section"> 
 
    <br> 
 
    <br> 
 
    <div class="center heading"> 
 
     <h1>About</h1> 
 
    </div> 
 
    <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10"> 
 
     <div class="row"> 
 
     <div class="col-md-offset-1 col-md-6 col-sm-offset-1 col-sm-6 col-xs-offset-1 col-xs-10 content-div content"> 
 
      <h3>Rishabh Kashyap</h3> 
 
      <h3>Full Stack Web Developer</h3> 
 
      <h3>Key Interests - JavaScript & MEAN Stack</h3> 
 
      <h3>Worked as an intern @ Sapient Global Markets</h3> 
 
      <h4><i>"Never be afraid to take risks. If you succeed, you can lead and if you fail, you can guide."</i><h4> 
 
      <h4>- Swami Vivekananda</h4> 
 
      <h3>Indeed. The motto, I try to live by. Professionally, as well as, Personally.</h3> 
 
     </div> 
 
     <div class="col-md-4 col-sm-4 col-xs-12 content-div"> 
 
      <img class="img-responsive project-img" alt="my image" src="https://lh3.googleusercontent.com/34CJNU0DexpintEhsM5-zcZdT_7mRWVA6dE-7f122WM3xj4xFI0nXYQhXyEG8tyrd4piHPHPGtCNtu_o5vqZ2eFFH2W9YS4ekKCqw7wgZzAjsKD8hdNoV5DrARz7I-BRljjksmdfHxoHaGIgwxcNYRJkEBa2FLIhbluVGZo1qN3zZ1ZJ1WpRU27mBbrCScNzazuOFtY0lOBX4JAKd7yGlC7ILwg4gAy-KsN-ZJz54PoNeCblgrz3jGsF8YvEf5Hc-V3kV8DtrDiKiwTpXPowvrLdldS-rIlOpjq1LrbPVNxWUNB1YieiqOUo1AEVYaS9WxiIFae2etL7Jb4nAW9MkLHE-YvQZ4VVcntRfXS3CBnuoy6EPHu2vfevnNeK9lgANs4rb1MNyMCxOACWmn45_vZKZoPfnmk_cyVzt7m2vFZUXPMdyeSRrViQD9VteriL89XHZlItrlgIhXI1vt5JAASHdOYrNV3CTpWMGPfzQk0BfQbbr2qcxnbgbSyEmK4M1wIloFQ0O_q-MCOdffySKCmct8iHRRrAcG5cWF_ArcX5GptL3tHAQHu9UCyfrjwIyI28NbrgZM0NkxxmpRAV5nRJGQetgxewxGaS2A6xfWnlW8jP-P4z=w479-h638-no?.jpg"/> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row" id="portfolio-section"> 
 
    <br> 
 
    <br> 
 
    <div class="center heading"> 
 
     <h1>Portfolio</h1> 
 
    </div> 
 
    <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10"> 
 
     <img class="img-responsive project-img" alt="portfolio page" src="http://www.thefamouspeople.com/profiles/images/swami-vivekananda-3.jpg"/> 
 
     <h4><i>A tribute page to Swami Vivekananda using basic HTML & Bootstrap.</i></h4> 
 
    </div> 
 
    </div> 
 
    <div class="row" id="contact-section"> 
 
    <br> 
 
    <br> 
 
    <div class="center heading"> 
 
     <h1>Contact Me</h1> 
 
    </div> 
 
    <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10"> 
 
     <div class="center content"> 
 
     <h4><i>[email protected]</i></h4> 
 
     </div> 
 
     <br> 
 
     <div class="center"> 
 
     <button value="https://www.facebook.com/rishabh.kashyap.940436"><i class="fa fa-facebook"></i></button> 
 
     <button value="https://twitter.com/iamrkcheers"><i class="fa fa-twitter"></i></button> 
 
     <button value="https://github.com/iamrkcheers"><i class="fa fa-github"></i></button> 
 
     <button value="https://www.freecodecamp.com/iamrkcheers"><i class="fa fa-free-code-camp"></i></button> 
 
     <button value="https://www.linkedin.com/in/rishabh-kashyap-735879117/"><i class="fa fa-linkedin"></i></button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row" id="meta-section"> 
 
    <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10"> 
 
    </div> 
 
    </div> 
 
</div>

这是我的链接的代码.. https://codepen.io/iamrkcheers/pen/KmxEpw

任何帮助表示赞赏。谢谢。

来源

2017-05-26 iamrkcheers