如何分別在向下/向上滾動時淡入/淡出按鈕

Question

我正在我的投資組合網站上工作，我是Javascript的完全初學者。

我想要一個位置固定的按鈕，當我向下滾動時慢慢淡入（假設當我從文檔頂部滾動到 >=20px 時，它應該淡入） ，當我向上滾動到原始位置時，應該會逐漸淡出。

我已經嘗試過並為此編寫了代碼。 當您向下和向上滾動時，它運行良好。 但是當您快速滾動並在中途停止滾動時，它的行為非常異常（突然出現或消失）。

HTML :

<div class="a_large_page">
    <div class="enclose bordar black" id="bottomtoup">hello</div>
</div>

JS ：

mybutton = document.getElementById("bottomtoup")

// initially, the button stays hidden
visible = false

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    if (!visible) { // if the button is not visible,
      unfade(mybutton); // function to gradually fadein button
      visible = true; // button is visible so, set visible = false to true.
    }

  } else {

    if (visible) { // if the button is visible,
      fade(mybutton); // function to gradually fadeout button
      visible = false; // set visible = true back to false
    }


  }
}


function unfade(element) {
  var op = 0.1; // initial opacity
  element.style.display = 'flex';
  var timer = setInterval(function() {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op += op * 0.1;
  }, 10);
}


function fade(element) {
  var op = 1; // initial opacity
  var timer = setInterval(function() {
    if (op <= 0.1) {
      clearInterval(timer);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op -= op * 0.1;
  }, 50);
}

 

這是小提琴： https : //jsfiddle.net/P0intMaN/Lmp6u5ft/23/

我的代碼肯定不合標准。 這就是它以這種方式表現的原因。 因此，我正在尋找一種有效的方法來實現這一目標。 我見過有人使用JQuery來做到這一點，但我根本不了解 JQuery。 因此，如果代碼是純 JS ，將不勝感激。

Answer 1

當你能做這么少的事情時，沒有必要擁有這么多的 JS：

如果你覺得改變時間

 // Set a function onscroll - this will activate if the user scrolls window.onscroll = function() { // Set the height to check for var appear = 20 if (window.pageYOffset >= appear) { // If more show the element document.getElementById("bottomtop").style.opacity = '1' document.getElementById("bottomtop").style.pointerEvents = 'all' } else { // Else hide it document.getElementById("bottomtop").style.opacity = '0' document.getElementById("bottomtop").style.pointerEvents = 'none' } }

 .a_large_page{ background-color: gray; height: 2000px; } .enclose{ height: 40px; width: 40px; position:fixed; margin-right: 20px; margin-bottom: 20px; right:0; bottom:0; pointer-events:none; opacity:0; justify-content: center; align-items: center; color:white; /* This determines how fast animation takes place, you can change it as per your choice. */ transition:all 0.6s; } .enclose:hover{ cursor: pointer; }

 <div class="a_large_page"> <div class="enclose bordar black" id="bottomtop">hello</div> </div>

Answer 2

我已經更改了您的代碼並刪除了setInterval用法。 這可以用它來解決，但對於新的編碼人員來說可能更難理解。

還有一些標志可以跟蹤您當前是否正在fading或未unfading以確保您不會堆疊或“重疊”超時/間隔。

mybutton = document.getElementById("bottomtoup")

// initially, the button stays hidden
var visible = false

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
    var threshold = 20;
    var below_threshold = document.body.scrollTop > threshold || document.documentElement.scrollTop > threshold;
  
  if (below_threshold) {
    if (!visible) { // if the button is not visible,
      unfade(mybutton); // function to gradually fadein button
    }
    
    return;
  }

  if (visible) { // if the button is visible,
    fade(mybutton); // function to gradually fadeout button
  }
}

var current_opacity = 0.1;
var is_unfading = false;
var is_fading = false;

function unfade(element) {
    if(!visible){
    element.style.display = 'flex';
    visible = true;
  }
  
  is_fading = false;
  is_unfading = true;
  
  unfade_step(element);
}

function unfade_step(element){
    element.style.opacity = current_opacity;
    element.style.filter = 'alpha(opacity=' + current_opacity * 100 + ")";
    
    if (current_opacity >= 1){
        // end
      is_unfading = false;
      current_opacity = 1;
        return;
    }
    
    current_opacity += 0.01;
    if(is_unfading){
      setTimeout(function(){
        unfade_step(element);
      }, 10);
    }
}

function fade(element) {
    if(!visible){
    return;
  }
  
  is_fading = true;
  is_unfading = false;
  
  fade_step(element);
}


function fade_step(element) {
    element.style.opacity = current_opacity;
    element.style.filter = 'alpha(opacity=' + current_opacity * 100 + ")";
    
    if (current_opacity <= 0.001){
        // end
      is_fading = false;
      visible = false;
      current_opacity = 0.1;
        element.style.display = 'none';
        return;
    }
    
    current_opacity -= 0.01;
    if(is_fading){
      setTimeout(function(){
        fade_step(element);
      }, 10);
    }
}

Answer 3

無需在更現代的瀏覽器中感知滾動事件，因為您可以使用 IntersetionObserver 來告訴您滾動超過 20px 的時間；

您可以通過在頁面頂部放置一個高度為 20 像素的小元素來實現。 然后，您要求系統告訴您它何時離開或返回視口。 在這些點上，您可以根據需要將 Hello 的不透明度設置為 1 或 0。

額外的好處是您擺脫了大量代碼，並且在設置間隔之間不會發生沖突，因為我們在不透明度上使用過渡來逐步淡入/淡出。

 // See MDN for more info on IntersectioObserver let callback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { mybutton.style.opacity = 0; } else { mybutton.style.opacity = 1; } }); }; const mybutton = document.getElementById("bottomtoup") const observer = new IntersectionObserver(callback); const observed = document.getElementById("observed"); observer.observe(observed);

 .a_large_page { background-color: gray; height: 2000px; position: relative; } #observed { position: absolute; top: 0; left: 0; height: 20px; width: 10px; z-index: -999; } .enclose { height: 40px; width: 40px; position: fixed; margin-right: 20px; margin-bottom: 20px; right: 0; bottom: 0; justify-content: center; align-items: center; color: white; opacity: 0; transition: opacity 1s linear; }

 <div class="a_large_page"> <div id="observed"></div> <div class="enclose bordar black" id="bottomtoup">hello</div> </div>