Javascript 单击导航链接时更新功能

您好，我有一个功能，当您单击导航中的链接时，主体的内容会发生切换，我将其与问题中的一个小脚本相结合，效果非常好。唯一的问题是，如果你点击一个链接而不滚动，图像将不会显示，除非你滚动至少1px。所以我想知道是否有解决办法

旁白：是否可以等待内容显示，直到页面完全向上滚动

脚本：

$(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
});

$（窗口）.on（“加载”，函数（）{
功能衰减（页面加载）{
var windowTop=$（window.scrollTop（），windowBottom=windowTop+$（window.innerHeight（）；
最小值为0，最大值为1，阈值为0.01；
$（“.fade”）。每个（函数（）{
/*检查每个所需元件的位置*/
var objectHeight=$（this）.outerHeight（），objectTop=$（this）.offset（）.top，objectBottom=$（this）.offset（）.top+objectHeight；
/*基于其可见百分比的淡入/淡出元素*/
if（objectTopwindowTop）{$（this）.fadeTo（0，min+（（max-min）*（（objectBottom windowTop）/objectHeight））；}
如果（$（this.css（“opacity”）>=min+threshold | | pageLoad）{$（this.fadeTo（0，min）}
}else if（objectBottom>windowBottom）{
if（objectTop=min+threshold | | pageLoad）{$（this.fadeTo（0，min）}
}否则如果（$（this）.css（“opacity”）您可以通过在
加载事件侦听器
之外使用
淡入淡出
方法来实现它，该方法将使它在任何地方都可用。然后单击
导航按钮
调用它

请参阅下面的js：

$(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 
  });
}

$（窗口）.on（“加载”，函数（）{
this.fade（true）；//页面加载时淡入淡出元素
$（window.scroll（function（）{this.fade（false）；}）；//滚动上的淡入淡出元素
});
//在加载事件侦听器外部使用下面的淡入淡出方法。
功能衰减（页面加载）{
var windowTop=$（window.scrollTop（），windowBottom=windowTop+$（window.innerHeight（）；
最小值为0，最大值为1，阈值为0.01；
$（“.fade”）。每个（函数（）{
/*检查每个所需元件的位置*/
var objectHeight=$（this）.outerHeight（），objectTop=$（this）.offset（）.top，objectBottom=$（this）.offset（）.top+objectHeight；
/*基于其可见百分比的淡入/淡出元素*/
if（objectTopwindowTop）{$（this）.fadeTo（0，min+（（max-min）*（（objectBottom windowTop）/objectHeight））；}
如果（$（this.css（“opacity”）>=min+threshold | | pageLoad）{$（this.fadeTo（0，min）}
}else if（objectBottom>windowBottom）{
if（objectTop=min+threshold | | pageLoad）{$（this.fadeTo（0，min）}
}else if（$（this）.css（“不透明度”）{
//et=事件目标
常数et=e.目标；
//slect主动导航类
const activenav=document.querySelector（“.activenav”）；
//检查具有activenav类的按钮并将其删除
如果（活动导航）{
activenav.classList.remove（“activenav”）；
}
//将activenav类添加到单击的元素
et.classList.add（“activenav”）；
//选择名称为content的所有类
让allContent=document.queryselectoral（'.contentsec'）；
//循环浏览所有内容类
for（让contentsec代表所有内容）{
//如果类与按钮具有相同的数据属性，则显示内容
if（contentsec.getAttribute（'data-number'）==button.getAttribute（'data-number'））{
contentsec.style.display=“块”；
}
//如果不相等，则隐藏它。
否则{
contentsec.style.display=“无”；
}
}
this.fade（true）；//单击调用fade方法
});
}

你可以测试一下