根据divid滚动位置滑入滑出元素

Question

我试图在 div 到达浏览器顶部时隐藏和显示元素。我读了几个线程并编写了这段代码

function hidebtn() {
  var scrollTop = $(window).scrollTop(),
    elementOffset = $('.triger').offset().top,
    distance = (elementOffset - scrollTop);

  var x = document.getElementById("u94");

  if (distance < 1) {
    $(x).animate({'top': '-100px'}, 300);
  } else {
    $(x).animate({'top': '0px'}, 300);
  }
}

window.onscroll = hidebtn

出于同样的原因，它不起作用，或者更具体地说，它会延迟很长时间。

如果我将条件代码更改为

if (distance < 1 ) {
    x.style.display = "none";
} else {
    x.style.display = "block";
}

效果很好，但我真的很喜欢使用滑动动画

你可以在JSFIddle

中看到它

有什么建议吗？

Answer 1

onscroll 在用户滚动时被多次调用。您可以设置一点超时来删除过多的调用：

var scrollTimer = null;

function hidebtn() {

    if (scrollTimer) {
        clearTimeout(scrollTimer);  // clear previous timer
    }

    // set timer while we wait for a pause in scroll events
    scrollTimer = setTimeout(function() {
        scrollTimer = null;  // timer done here
        console.log("ok");

        var scrollTop = $(window).scrollTop(),
          elementOffset = $('.triger').offset().top,
          distance = (elementOffset - scrollTop);

        var x = document.getElementById("u94");

        if (distance < 1) {
          $(x).animate({'top': '-100px'}, 300);
        } else{
          $(x).animate({'top': '0px'}, 300);
        }
    }, 100); // delay time
}

window.onscroll = hidebtn

这是一个有效的 fiddle

Answer 2

动画功能被多次触发，会导致一些难以调试的问题。更好的解决方案是使用 css 和一些额外的检查。这样 hide/show 只会在需要时触发。

Css

.hide {
  position: relative;
  transform: translateY(-100%);
  transition: all 0.3s ease-in-out;
}

JS

function hidebtn() {
  var scrollTop = $(window).scrollTop(),
    elementOffset = $('.triger').offset().top,
    distance = (elementOffset - scrollTop);

  var x = $("#u94");
    var isHidden = x.hasClass('hide');

  if (distance <= 0 && !isHidden) {
    x.addClass('hide');
    console.log("hide");
  } else if (distance > 0 && isHidden) {
    x.removeClass("hide")
  }
}

window.onscroll = hidebtn

Fiddle: https://jsfiddle.net/andreiTn/yag47gyn/

根据divid滚动位置滑入滑出元素

Slide in and out element according to div id scroll position

javascript

animation

scroll

slide