[英]updating function when nav link is clicked
您好,我有一個功能,當您單擊導航中的鏈接時,正文的內容會切換,我將它與這個問題的一個小腳本結合起來,效果很好。 唯一的問題是,如果您單擊鏈接並且不滾動圖像,則除非您滾動至少 1 像素,否則圖像將不會顯示。 所以我想知道是否有解決此問題的方法。 JSF中。
附帶問題:是否可以等待內容顯示,直到頁面完全向上滾動?
腳本:
$(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
});
您可以通過在load event listener
之外采用fade
方法來實現它,這將使其在任何地方都可用。 然后點擊nav buttons
調用它。
見下面的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
});
}
你可以在這里測試它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.