javascriptjquerycssjquery-waypoints

add and remove function not working in jquery


I tried to add a secondary navigation bar that is fixed to the top-right of the webpage created and only appears when we scroll the page little bit down. this navigation is contained in the "sticky" class. the code and syntax seems to be right. but this bar is not hiding itself when the webpage is on the initial stage. its always there. I only want it to appear when the webpage is being scrolled down. pls help me fix this.

$(document).ready(function() {

    $('.js--section-features').waypoint(function(direction) {
        if (direction == 'down') {
            $('nav').addClass('sticky');
        } else {
            $('nav').removeClass('sticky');

        }
    });
});

Solution

  • I figured it out. I am posting this answer to only let people know what the actual problem is in my code.

    <nav class = "sticky">
    

    i defined my secondary nav class to the main nav permanently. that`s why the "sticky nav bar was always on the top of my website.