Add/Remove Class of Nav Objects on Page Scroll

by

You forgot to add the # in the removeClass parts:

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $('#cards').position().top) {
    $("#navcard").addClass("active");;
  } else {
    $("#navcard").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#projects').position().top) {
    $("#navprojects").addClass("active");;
  } else {
    $("#navprojects").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#dave').position().top) {
    $("#navdave").addClass("active");;
  } else {
    $("#navdave").removeClass("active")
  }
})

Update

Try changing your code to this and let me know what the results of each console.log is:

$(document).on('scroll', function() {

  console.log($(this).scrollTop());
  console.log($('#cards').position().top);
  console.log($('#projects').position().top);
  console.log($('#dave').position().top);

  if ($(this).scrollTop() >= $('#cards').position().top) {
    $("#navcard").addClass("active");;
  } else {
    $("#navcard").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#projects').position().top) {
    $("#navprojects").addClass("active");;
  } else {
    $("#navprojects").removeClass("active")
  }
  if ($(this).scrollTop() >= $('#dave').position().top) {
    $("#navdave").addClass("active");;
  } else {
    $("#navdave").removeClass("active")
  }
})

More Related Contents:

  1. PLEASE assist me.. RE: *FORM FIELDS* I want to Hide() my "type=text box" until the Other option is chosen in the dropdown option
  2. Dynamically adding div on button click and changing Id of each?
  3. How to make page loaders/animations/transitions
  4. HTML-encoding lost when attribute read from input field
  5. jQuery Set Cursor Position in Text Area
  6. Make header and footer files to be included in multiple html pages
  7. How do I link a JavaScript file to a HTML file?
  8. Force a browser to save file as after clicking link [duplicate]
  9. jQuery : simulating a click on a doesn’t work in Firefox? [duplicate]
  10. “Mixed content blocked” when running an HTTP AJAX operation in an HTTPS page
  11. How to check “checkbox” dynamically – jQuery Mobile
  12. Chrome Extension how to send data from content script to popup.html
  13. Using jQuery how to get click coordinates on the target element
  14. Integrating Dropzone.js into existing HTML form with other fields
  15. Dropdown select with images
  16. Generic way to detect if html form is edited
  17. How to prevent page from reloading after form submit – JQuery
  18. Is there a way to create out of DOM elements in Web Worker?
  19. Avoid window jump to top when clicking #-links
  20. jQuery Change event on an element – any way to retain previous value?
  21. How to build simple tabs with jQuery?
  22. Emailing to multiple recipients with html Mailto: not working
  23. Is it possible to append a div inside an SVG element? [duplicate]
  24. How can I get all a form’s values that would be submitted without submitting [duplicate]
  25. Jquery click event not firing on the element created dynamically using jquery
  26. Calculate Position of selected text javascript/JQuery?
  27. Adding onClick event dynamically using jQuery
  28. How to show hidden divs on mouseover?
  29. Using .after() to add html closing and open tags
  30. Changing “src” attribute of

Leave a Comment