CODEWITHSUNDEEP
jqueryjquery-waypoints
seanx
seanx

Reputation: 131

How to disable and restore jQuery waypoints on page with anchors and menu active styles

I have a page using the jQuery waypoints plugin, as well as the scrollTo plugin, to achieve a sticky header etc (ala the tutorial here:http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/).

I have most everything working well, but I have run into the behavior you can see on the submenu - when clicking on a link corresponding to a div lower on the page, the page scrolls as appropriate to the div and the menu updates with the 'selected' class style. But because the page is scrolling past the other divs, the menu animates through each active menu item as the page scrolls past. I want to be able to remove the function and then restore it as soon as the page navigates to the corresponding div, so that this flash of animating active menu links is removed. You can see what I am talking about here (in the submenu, if you click on any a link such as shuttle drivers or receptionists, etc).

http://pinnacleahs.com/?page_id=8

I know that there is a remove() method in the waypoints plugin, but I am not sure how to restore it. Also, maybe there is an alternate way to achieve the same end.

My function looks like this:

$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".navContainer");
var nav = $(".navStickyHolder");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
if (direction == 'down'){
nav_container.css({ 'height':nav.outerHeight() });
} else  { 
 nav_container.css({ 'height':'auto' });
} 
},
offset: 177
});

var sections = $(".servicePanel");
 var navigation_links = $(".servicesNavigation li a");
 sections.waypoint({
    handler: function(event, direction) {
    var active_section;
    active_section = $(this);
    if (direction === "up") active_section = active_section.prev();

        var active_link = $('.servicesNavigation li a[href="#' +  active_section.attr("id") + '"]');
        navigation_links.removeClass("selected");
        active_link.addClass("selected");

    }, offset: 295
})



navigation_links.click( function(event) {

        $.scrollTo(
        $(this).attr("href"),
        {
            duration: 300,
            offset: { 'left':0, 'top': -240 }
        }
    );

    navigation_links.removeClass("selected");
    $(this).addClass("selected");

        });
        });

Upvotes: 2

Views: 3473

Answers (1)

desmillicious
desmillicious

Reputation: 31

Hi are you using the latest version of waypoints from here? You need to define the waypoints option "continuous" as "false"

eg:

 $('.div')
  .waypoint(function(direction){
    if (direction === 'down') {
      do stuff
    } //endif
    },{
        offset: '10px',
        continuous: false
  })
  .waypoint(function(direction){
    if (direction === 'up') {
     do stuff
    } //endif
    },{
       offset: '10px',
        continuous: false
    });
});

Upvotes: 1

Related Questions