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, 2022 in Web Development by gaurav
• 23,260 points
949 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, 2022 by rajatha
• 7,640 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, 2022 in Web Development by rajatha
• 7,640 points
252 views
0 votes
0 answers

Can regular JavaScript be mixed with jQuery?

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

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
267 views
0 votes
0 answers

Get current URL with jQuery?

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

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
395 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, 2022 in Web Development by gaurav
• 23,260 points
2,151 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
512 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
987 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,510 points
973 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,880 points
827 views
0 votes
1 answer

How to use JQuery with ReactJS

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

answered Jun 22, 2022 in Web Development by rajatha
• 7,640 points

edited Dec 15, 2023 by Soumya 13,751 views
0 votes
1 answer

Check if checkbox is checked with jQuery

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

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