updating function when nav link is clicked

Question

Hello I have a feature where when you click a link in the navigation the content of the body switches and I was combining it with a little script from this question and it works great. The only thing is that if you click a link and don't scroll the images won't show up unless you scroll at least 1px. So I was wondering if there's a fix for this. JSFiddle.

Side question: Would it be possible to wait for the content to show up until the page is fully scrolled up?

Script:

$(window).on("load",function() {
  function fade(pageLoad) {
    var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
    var min=0, max=1, threshold=0.01;
    
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
      
      /* Fade element in/out based on its visible percentage */
      if (objectTop < windowTop) {
        if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if (objectBottom > windowBottom) {
        if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
    });
  } fade(true); //fade elements on page-load
  $(window).scroll(function(){fade(false);}); //fade elements on scroll
});

score 1 · Accepted Answer · answered Apr 15 '21 at 13:51

You can achieve it by taking fade method outside the load event listener that will make it available everywhere. And then call it from on the click of nav buttons.

See the js below:

$(window).on("load",function() {
 this.fade(true); //fade elements on page-load
  $(window).scroll(function(){this.fade(false);}); //fade elements on scroll
});

//Take below fade method outside of the load event listener.

  function fade(pageLoad) {
    var windowTop=$(window).scrollTop(), windowBottom=windowTop+$(window).innerHeight();
    var min=0, max=1, threshold=0.01;
    
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectHeight=$(this).outerHeight(), objectTop=$(this).offset().top, objectBottom=$(this).offset().top+objectHeight;
      
      /* Fade element in/out based on its visible percentage */
      if (objectTop < windowTop) {
        if (objectBottom > windowTop) {$(this).fadeTo(0,min+((max-min)*((objectBottom-windowTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if (objectBottom > windowBottom) {
        if (objectTop < windowBottom) {$(this).fadeTo(0,min+((max-min)*((windowBottom-objectTop)/objectHeight)));}
        else if ($(this).css("opacity")>=min+threshold || pageLoad) {$(this).fadeTo(0,min);}
      } else if ($(this).css("opacity")<=max-threshold || pageLoad) {$(this).fadeTo(0,max);}
      
    });
  }

    
// change activenav class, show the clicked element only and hide the others https://codepen.io/MohdHussein/pen/MWKEvdp


// grab all the buttons
let Buttons = document.querySelectorAll(".selectSection button");

// loop through the buttons using for..of 
for (let button of Buttons) {
  // listen for a click event 
  button.addEventListener('click', (e) => {
    // et = event target
    const et = e.target;
    // slect activenav class
    const activenav = document.querySelector(".activenav");
    // check for the button that has activenav class and remove it
    if (activenav) {
      activenav.classList.remove("activenav");
    }
    // add activenav class to the clicked element 
    et.classList.add("activenav");

    // select all classes with the name content
    let allContent = document.querySelectorAll('.contentsec');

    // loop through all content classes
    for (let contentsec of allContent) {
      // display the content if the class has the same data-attribute as the button 
      if (contentsec.getAttribute('data-number') === button.getAttribute('data-number')) {
        contentsec.style.display = "block";
      }
      // if it's not equal then hide it.
      else {
        contentsec.style.display = "none";
      }
    }
    this.fade(true); //Call fade method on click 
  });
}

You can test it here.

updating function when nav link is clicked

1 Answers1