CODEWITHSUNDEEP
jqueryjquery-waypoints
l0ttch3n
l0ttch3n

Reputation: 13

jQuery Waypoints fire at bottom of page

so since I don't know much about jQuery and am mostly copying and pasting codes, while I still try to understand them, I mostly fail at the last part - understanding. Well, so now for my problem: I'm building a Onepager with a navigation on top with 4 navigation-points: work, skills, about, contact (same id's). I'm trying to toggle a class when a certain span is reached, so that the link in the nav is highlighted. This works fine up to contact - which is at the bottom of the page. So I already searched quite a while and found out it may have to do something with offset attribute. But I just can't get my head around how to add it, so that the last waypoint triggers, when the user reaches the bottom of the page - and again, when the bottom gets out of sight.

This is my js-code so far:

$('#work').waypoint(function(direction) {
  $('#nav-work').toggleClass('nav-hover', direction === 'down');
});
$('#skills').waypoint(function(direction) {
  $('#nav-work').toggleClass('nav-hover', direction === 'up');

});
$('#skills').waypoint(function(direction) {
  $('#nav-skills').toggleClass('nav-hover', direction === 'down');
});
$('#about').waypoint(function(direction) {
  $('#nav-skills').toggleClass('nav-hover', direction === 'up');
});

$('#about').waypoint(function(direction) {
  $('#nav-about').toggleClass('nav-hover', direction === 'down');
});
$('#contact').waypoint(function(direction) {
  $('#nav-about').toggleClass('nav-hover', direction === 'up');
});

$('#contact').waypoint(function(direction) {
  $('#nav-contact').toggleClass('nav-hover', direction === 'down');
  {offset:'bottom-in-view'};
});

As you can see I already tried out something with the last part but that just doesn't work for me. Also: I'm building my site fully responsive - I and avoid explicit Pixel-heights and -widths. I'm mostly working with vh and vw. Another note: My footer's height is 20vh. This is meant to work through all devices.

I would really appreciate your help since I've already gone through all related topics here and in the internet and just can't find a solution for me.

To make it more clear I'll try to give you the relevant code parts of html and css (since the whole page's code would be too much and doesn't give a good overview.)

HTML:

    <!--Nav-->
            <div class="sticky-nav">
                <a href="#start"><img src="images/Bildmarke.svg" alt="home"></a>
                <p>lisa röhl</p>
                <ul>
                    <li><a class="nav" id="nav-contact" href="#contact">contact</a></li>
                    <li><a class="nav" id="nav-about" href="#about">about</a></li>
                    <li><a class="nav" id="nav-skills" href="#skills">skills</a></li>
                    <li><a class="nav" id="nav-work" href="#work">work</a></li>
                </ul>
            </div>
<span class="anchor-work" id="work"></span>
<span class="anchor" id="skills"></span>
<span class="anchor" id="about"></span>
<span class="anchor" id="contact"></span>

CSS:

.nav:hover{
        color:#e76600 !important;
    }
    .nav-hover{
        color:#e76600 !important;
    }
.contact-down{
    height:20vh;
    background-color:#2b3534;
} /*Note:This is the css of the div, where the contact-part is in - so the height of the "footer"*/

I hope this helps out :)

Upvotes: 1

Views: 1638

Answers (1)

The Dark Knight
The Dark Knight

Reputation: 727

Take a look at this Jsbin: http://jsbin.com/fobecunaye/edit?html,css,js

I am using the no dependencies version of waypoints, Basically by default waypoints checks if the entire element is in view, adding a small view point offset fixes any scrolling issues. The following is the code for your contact element. 

   //This is the code for the bottom div (or in your case a span) 
var waypoint = new Waypoint({
  element: document.getElementById('contact'), //Select element
  handler: function(direction) {
    $('span').removeClass('nav-hover');
    // The preceding line just removes all elements with nav-hover class, deselecting them
    $('#nav-contact').addClass('nav-hover');
    // This line just adds the nav-hover class
  },
  offset: 3 // Tells waypoint to instantiate when the element is 3px away from the top 
});

Variables Waypoint throught Waypoint4 will replace your existing js. Also the version of waypoint has been changed to the following

 <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/noframework.waypoints.min.js"></script>

I'd Be glad to help if you have any questions..

EDIT: Okay, I think I found the problem in the code,

$('#contact').waypoint(function(direction) {
  $('#nav-contact').toggleClass('nav-hover', direction === 'down');
  {offset:'bottom-in-view'};
});

Should be:

 $('#contact').waypoint(function(direction) {
  $('#nav-contact').toggleClass('nav-hover', direction === 'down');
}, {
  offset: 'bottom-in-view' 
});

The {offset...} part should be another parameter in waypoint you just put in the function.

Upvotes: 1

Related Questions