CODEWITHSUNDEEP
javascriptjquerycssajaxjquery-plugins
Jerry S.
Jerry S.

Reputation: 91

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.

http://fiddle.jshell.net/DQgkE/7/show/

The experience is a bit jumpy and buggy now- but what i will like is

1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.

2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.

Below is a starting point.

3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up

http://imakewebthings.com/jquery-waypoints/#doc-disable

using disable, destroy, enable option will be nice.

This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/

Thanks for the help in Advance.

Upvotes: 0

Views: 444

Answers (2)

Manos Mertzianis
Manos Mertzianis

Reputation: 1

I would recommend to use jQuery (that was a surprise, right?! :P)

    $(document).ready(function() {        //when document is ready
      var topDist = $("nav").position();  //save the position of your navbar !Don't create that variable inside the scroll function!
      $(document).scroll(function () {    //every time users scrolls the page
        var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
        if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
          $('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
          } else {                          //window is on top position, reaches trigger position from bottom-to-top scrolling
              $('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
          }
      });
    });

I really hope I helped!

Upvotes: 0

dane fairbanks
dane fairbanks

Reputation: 116

I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.

EDIT I went ahead and fixed the original code. Solution without waypoint plugin is in comments.

Here is the result: http://fiddle.jshell.net/Taks7/show/

Upvotes: 1

Related Questions