scrolling up with jquery waypoints

0 votes

I am using jquery waypoints plugin for a one page scrolling site. there is a fixed top menu.

<ul id="main_nav">
  <li><a href="#home">home</a></li>
  <li><a href="#about">about</a></li>
  <li><a href="#contact">contact</a></li>
</ul>

The content divs are like this:

<div id="content">
  <div id="home" class="page_content">Content here</div>
  <div id="about" class="page_content">Content here</div>
  <div id="contact" class="page_content">Content here</div>
</div>

My scrolling is working fine. but problem is waypoints. If I click a link, the menu is selected (adding a class - current). I am using waypoint to do the same thing for scrolling the page. when scrolling down, it works fine. but does not work perfectly for scrolling up. It needs to be moved some more top. then it works. If I use offset -1%, then it works for scrolling up. but then there is problem for down scrolling. here is my js code:

// CODE FOR SCROLLING
$('ul#main_nav a').bind('click',function(event){
    $('ul#main_nav a').removeClass("current");
    $(this).addClass("current");
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');
    event.preventDefault();
});

// CODE FOR WAYPOINT
$('.page_content').waypoint({offset: '0%'});
$('.page_content').bind('waypoint.reached', function(event, direction) {
   var wayID = $(this).attr('id');
   $('.current').removeClass('current');
   $('#main_nav a[href=#'+wayID+']').addClass('current');       
});

Jul 25 in Web Development by gaurav
• 17,580 points
10 views

1 answer to this question.

0 votes

Look at the offset option

someElements.waypoint(function(event, direction) {
   if (direction === 'down') {
      // do this on the way down
   }
   else {
      // do this on the way back up through the waypoint
   offset: '50%'  // trigger at middle of page.

   }
});
answered Jul 26 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
1 answer

How to hide a div with jQuery?

We hide the divs by adding a CSS ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
22 views
0 votes
0 answers

Can regular JavaScript be mixed with jQuery?

For example, can I take this script ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
14 views
0 votes
0 answers

Get current URL with jQuery?

I am using jQuery. How do I ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
15 views
0 votes
0 answers

How can I get form data with JavaScript/jQuery?

Is there a simple, one-line way to ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
22 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
190 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
602 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Error: Global Variable is not accessable to local function

Hey kartik, A variable declared outside a function has a ...READ MORE

answered Feb 19, 2020 in PHP by Niroj
• 82,740 points
283 views
0 votes
1 answer

How to use JQuery with ReactJS

Yes, we can use jQuery in ReactJs. ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
16 views
0 votes
1 answer

Check if checkbox is checked with jQuery

To check whether a Checkbox has been ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
34 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP