CODEWITHSUNDEEP
javascriptjquerycssnavigationscroll
gigi2765
gigi2765

Reputation: 1

nav bar on scrolling page. active link

Currently my website has the scrolling function with a fixed nav bar (page scrolls down when you click the differernt links on the navigation. I added the function that the page you are on the has an active link. The only issue is that when you click on a different link on the navigation bar, as it passes over the other pages those links highlight until you reach the page you want (for example if you are on contact and click home it highlights portfolio, then experience, then about, and then finally home once it reaches it. I don't want it to highlight the ones it passes over.

http://jsfiddle.net/gigi2233/e0jbvmyk/6/

HTML

<!--nav-->

<div id="icon">
    <ul class="icon">
        <li><img src="logo.jpg" alt="logo" class="icon"></li>
    </ul>
</div>

<div id="nav">
    <ul class="nav">
        <li><a href="#home" onClick="gaq.push(('_trackPageview', 'home'))" class="link">HOME</a></li>
        <li><a href="#about" onClick="gaq.push(('_trackPageview', 'about'))" class="link">ABOUT</a></li>
        <li><a href="#experience" onClick="gaq.push(('_trackPageview', 'experience'))" class="link">EXPERIENCE</a></li>
        <li><a href="#portfolio" onClick="gaq.push(('_trackPageview', 'portfolio'))" class="link">PORTFOLIO</a></li>
        <li><a href="#contact" onClick="gaq.push(('_trackPageview', 'contact'))" class="link">CONTACT</a></li>
    </ul>
</div>


<!--home-->

<div id="home">
    <img src="home-large.jpg" class="homeposition">
</div>


<!--about-->


<div id="about">
    <img src="home-large.jpg" class="aboutposition">
</div>


<!--experience-->


<div id="experience">
    <img src="experience-large.jpg" class="experienceposition">
    <br><br>
    <a href="genevieveshahresume.pdf" class="resume"> DOWNLOAD PDF </a>


</div>

<!--portfolio-->
<br>


<div id="portfolio">
    <img src="home-large.jpg" class="portfolioposition">
</div>





<!--contact-->
<div id="contact">
        <img src="home-large.jpg" class="contactposition">
</div>

</body>
</html>

jQuery

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
js/jquery-1.10.2.min.js

CSS

body{
    font-size: 12pt;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    margin-left: auto;
    margin: 0px;
    padding: 0px;
    }

.wrapper{
    width: 400px;
    margin: 0 auto;
    position: relative;
    padding: 28px 0 0 0;
    }

.down{
    text-align:center;
    position:relative;
    }

/* nav */

 #nav ul{ 
    margin-top: 0px;
    width: 100%;
    padding: 25px 0px;
    background-color: #f2f2f2; 
    border-top:solid #8dacf9;
    position: fixed;
    margin-left: auto;
    text-align: center;
    z-index: 4;
    } 

 #nav ul li{  
    display: inline-block; 
    } 

#nav ul li a{ 
    text-decoration: none; 
    padding: 25px 35px; 
    color: #000000; 
    background-color: #f2f2f2; 
    } 

#nav ul li a:hover{ 
    color: #8dacf9; 
    background-color: #ffffff;
    }

#nav ul li a.active{ 
    color: #8dacf9; 
    background-color: #ffffff; 
    }


/* icon */

.icon{
    float: left;
    height: 50px;
    margin-top: 0px;
    position: fixed;
    z-index: 10;
    }

#icon ul{ 
    margin-top: auto;
    padding: 10px 30px;
    background-color: #f2f2f2; 
    border-top:solid #8dacf9;
    position: fixed;
    } 

#icon ul li{  
    display: inline; 
    } 

#icon ul li a{ 
    color: #000000; 
    background-color: #f2f2f2; 
    margin-top: 0px;
    } 


/*  links */

a:link{
    color: #000000;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }

a:visited{
    text-decoration: none;
    color: #000000;
    }

a:hover{
    text-decoration: none;
    color: #8dacf9;
    }

a:active{
    text-decoration: none;
    color: #8dacf9;
    }   


/*home*/

#home{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    }

.homeposition{
    text-align:center;
    margin-top:70px;
    }



/* about */

#about{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }

.aboutposition{
    text-align:center;
    margin-top:70px;
    }



/* experience */

#experience{
    height:auto;
    position:relative;
    color: #000000;
    text-align: center;
    }

.experienceposition{
    margin-top:70px;
    }

.resume:link{
    color: #8dacf9;
    font-size: 1.2em;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }

.resume:visited{
    text-decoration: none;
    color: #8dacf9;
    }

.resume:hover{
    text-decoration: none;
    color: #b4b3b3;
    }

.resume:active{
    text-decoration: none;
    color: #b4b3b3;
    }   


/* portfolio */

#portfolio{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }

.portfolioposition{
    text-align:center;
    margin-top:70px;
    }


/* contact */

#contact{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }

.contactposition{
    text-align:center;
    margin-top:70px;
    }

JAVASCRIPT

$(document).ready(function () {
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        $('.link').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 10) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });
    });
});


$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: (target.offset().top - 0)
        }, 900);
        return false;
      }
    }
  });
});

Upvotes: 0

Views: 1909

Answers (1)

nzkevin
nzkevin

Reputation: 113

I think you can remove the scroll function, and highlight the link only when clicking on it.

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            // Remove 'active' class from all links
            $('.link').removeClass('active');
            // Add 'active' class to the current link
            $(this).addClass('active');
            // And animation
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 0)
                }, 900);
                return false;
            }
        }
    });
});

I didn't test it, but something like this should work. I don't think you really need the window.scroll() function.

Upvotes: 0

Related Questions