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.

javascriptjquerycssajaxjquery-plugins

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

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!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for deleting scripts to optimize for mobile responsiveness?

My current plugin.js file houses all my plugins for responsive design, but it is unnecessarily large and cumbersome for mobile devices. I am considering creating two separate plugin.js files to toggle between for mobile and desktop views. What are the r ...

javascriptjquerywordpresshtmlresponsive-design

Despite following the instructions in the manual, the jquery code completion feature in Netbeans is not functioning as expected

Hello there, I've been trying to get jQuery code completion to work based on the information I found on various help pages. Here's what I did: Checked if my targeted browser was correct (I chose Firefox 3.x or later) Added the jQuery file into ...

jquerynetbeansautocomplete

Saving the data retrieved from a fetch request at a specified URL into a variable in JavaScript

I'm having some trouble loading data from a URL into a variable using .ready(). When I try to display the value in an alert box, it shows up as undefined. Can anyone offer some guidance on how to fix this? const fetchMasterProd = () => { ...

javascriptjqueryjson

The method of implementing an index signature within TypeScript

I'm currently tackling the challenge of using reduce in Typescript to calculate the total count of incoming messages. My struggle lies in understanding how to incorporate an index signature into my code. The error message that keeps popping up states: ...

javascriptarraystypescriptindex-signature

What is the process of encrypting a password using AngularJS on the client side, transferring it securely to the server through ExpressJS, and then decrypting it on the server

Looking for a simple method to encrypt a password on the client side using angular.js, send it to the server with express.js, and then decrypt it? While there are libraries like angular-bcrypt and similar ones in nodeJS, they may not be suitable as they ma ...

javascriptangularjsnode.jsexpressencryption

Route Handler 13 is encountering difficulties in retrieving data from the body in the (app/api/auth) endpoint

Whenever I attempt to retrieve the body from the new export async function POST( req: Request), it seems to come through as a stream instead of the expected content type. The route handler can be found in api/auth/signup See folder layout image export asyn ...

javascripttypescriptroutesnext.js

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly. Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg Code: <div id="container"> <div ...

javascriptcssangular

Invoking a REST API synchronously using JavaScript

I am just starting out with JavaScript and the npm ecosystem. I am attempting to upload data to my REST service using a POST call. The data is being fetched from a CSV file, which is going well so far. For each line of data that is fetched, I convert it as ...

javascriptnode.jsrestnpmsynchronization

Preventing an RxJS Observable interval: A step-by-step guide

I am facing a unique scenario where I am using an RxJS interval, but I might need to abruptly stop it at any point. I thought there would be a simple method like cancel() or stop() similar to clearTimeout for intervals. Is there a way to stop an interval o ...

javascriptrxjsobservablerxjs5

Add several converted links as variables in each section

The title may not be the clearest, but I am facing a challenge with an ecommerce site that has unmodifiable HTML. My goal is to include additional links for each product displayed on a page showcasing multiple products. Each link should be unique to its re ...

javascriptjqueryhtml

The property linerGradiant of r cannot be destructured because it is not defined

I encountered the error "Cannot destructure property linerGradiant of r as it is undefined" during runtime, making it difficult to debug. The issue seems to stem from the compiled JS file, which is hard to read. The function is defined as follows: functio ...

javascriptreactjsmaterial-ui

Converting values into keys and vice versa in JavaScript: A comprehensive guide

I have an array of Objects where I want to convert the first value into a key and the second value into a value. Please review the question below along with my desired output: [ { "name": "Unknown", "value": "R ...

javascriptobject

Ways to Conceal <div> Tag

I need help with a prank .html page I'm creating for a friend. The idea is that when the user clicks a button, a surprise phrase pops up. I have managed to hide and unhide the phrase successfully using JavaScript. However, my issue is that when the pa ...

javascripthtmljquery

When trying to find a substring within a string in JavaScript, the "else if" statement may not be triggered

I'm currently working on creating a Hangman game using HTML and JS. Most of the code is functioning properly, but I've hit a roadblock. For some reason, one part of my if else statement isn't working correctly. Here's the line of code: ...

javascripthtml

What could be the reason for the appearance of Next.js compile indicator in my final production build?

Upon completing the development and deployment of a Next.js website, I observed that the black compile indicator continued to appear in the bottom-right corner of my browser, similar to its presence during local development. The indicator can be viewed he ...

javascriptnext.js

How can I generate a list of JavaScript files to be included in a template for both production and development environments using Grunt?

I need a way to organize a list of JavaScript files in one central location, either within gruntfile.js or an external JSON file, and then dynamically implement it into a template for both development and production environments. List of JavaScript files: ...

javascriptnode.jsgruntjs

Encountering a problem with Chrome Extension localization upon installation - receiving an error message claiming default locale was not specified, despite having

Error Message: "The package has been deemed invalid due to the following reason: 'Localization was utilized, however default_locale was not specified in the manifest.' Issue: I have developed a customized extension and defined a default locale, ...

javascriptjsongoogle-chromegoogle-chrome-extensionmanifest

troubleshoot using Visual Studio Code

Here's the scenario: I need to debug a project using VS Code. The project is usually started by a batch file and then runs some JavaScript code. Now, I want to debug the JavaScript code, but I'm not sure how to do that. If anyone has any instruct ...

javascriptnode.jsvisual-studio-code

Making an Ajax request that returns JSON data, which then needs to be appended into a select box

Struggling with including Json data in a select box has been an issue for me. Despite successfully retrieving the json data within my Ajax call, the problem persists. The ID appears in the select box as an option along with the name, which is not what I de ...

jsonajaxselectdynamiceach

Exploring Communication Strategies between AJAX and PHP

I am currently developing a web application using MySQL, PHP, and Javascript. In PHP, I have implemented all the classes related to the domain of the problem that persist in the database. Meanwhile, in Javascript, there exists a cache containing objects f ...

phpajaxdesign-patterns