Problem with Jquery Sticky Navigation

Question

Problem with Jquery Sticky Navigation

I've been struggling to understand this issue and can't seem to find any help.

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

The user experience is currently a bit glitchy, but what I would like is:

1) When scrolling down the page, I want the Sticky Nav to be disabled at a specific location (chapter-3) on the page so that users can continue scrolling down.

2) When the user scrolls back up, the code should stick the nav back in place and move it up until it reaches its original position at the top.

Here's a starting point for reference:

3) It's kind of doing that already, but there seems to be a significant jump when scrolling back up.

Using options like disable, destroy, enable would be helpful.

Here's a cleaner version of the original experience: http://fiddle.jshell.net/DQgkE/1/show/

Thank you in advance for your help.

javascript jquery css ajax jquery-plugins

Answer 1

Answer №1

The functioning of the plugin you have utilized is not entirely clear to me, however, I have an alternative solution that I developed some time ago using jQuery. This solution includes a few variables at the beginning - the item you want to remain sticky, the point where you want it to stop moving, the class to apply when it becomes sticky, and padding at the top and bottom. In this version, I have only made modifications to the JavaScript section.

UPDATE I have gone ahead and rectified the original code. An alternate solution without the waypoint plugin has been provided in the comments.

Check out the result here: http://fiddle.jshell.net/Taks7/show/

Answer 2

The functioning of the plugin you have utilized is not entirely clear to me, however, I have an alternative solution that I developed some time ago using jQuery. This solution includes a few variables at the beginning - the item you want to remain sticky, the point where you want it to stop moving, the class to apply when it becomes sticky, and padding at the top and bottom. In this version, I have only made modifications to the JavaScript section.

UPDATE I have gone ahead and rectified the original code. An alternate solution without the waypoint plugin has been provided in the comments.

Check out the result here: http://fiddle.jshell.net/Taks7/show/

Answer 3

Answer №2

My suggestion would be to consider incorporating jQuery into your project (surprise, surprise! :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 trust this information proves helpful!

Answer 4

My suggestion would be to consider incorporating jQuery into your project (surprise, surprise! :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 trust this information proves helpful!

Problem with Jquery Sticky Navigation

Answer №1

Answer №2

Similar questions

Retrieve the current state of the toggle component by extracting its value from the HTML

Tips for adding an additional div inside a navigation container, evenly spacing objects, and aligning the search bar to the right

Unable to update state from within a function in react

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

Obtain real-time information from an object using React

How can I generate codegen types using typeDefs?

What is the best way to retrieve comprehensive information from an API?

What is the best method for aligning forms vertically within a page layout?

Header becomes distorted while scrolling down, then returns to normal when scrolling back up

What is the best way to conceal a div element on a Razor Page depending on the user's input?

Indicating a particular row with jQuery

The background image fails to display on the button

The function e.preventDefault() appears to be ineffective when applied to both the submit button and anchor tag within an

The process of integrating a Loader in Javascript

Implementing Material UI Slider component to update state upon mouse release, enabling real-time sliding functionality

What is the correct way to utilize window.scrollY effectively in my code?

What is the best way to apply "display: none;" on a span element nested within a title attribute?

"Enhancing web interactivity with AJAX requests and dynamic functionality in web

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

Retrieve data from an HTML table with the power of jQuery