我目前有工作代码,但似乎有很多开销。不使用插件就可以达到相同的效果或清除我的代码以消除尽可能多的开销。我知道这是导致此问题的滚动方法,但是没有它我似乎无法使其工作。

JS整理工作代码/示例:https://jsfiddle.net/816fmsg3/3/

要优化的Javascript

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();
  var elemTop = $(elem).offset().top;
  console.log((elemTop <= docViewBottom) && (elemTop >= docViewTop))
  return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
var marker = $('.marker');

$(window).scroll(function() {
  var result = isScrolledIntoView(marker)
  if (result === true) {
    $('.target').hide()
  } else {
    $('.target').show()
  }
});


谢谢,谢谢你的帮助

最佳答案

滚动事件时会多次触发事件,因此,您最好的办法是最大程度地减少该函数完成的工作量。这是我从John Resig(jQuery的创建者)那里学到的一个巧妙技巧:

$(window).scroll(function() {
  didScroll = true;
});

target = $('.target')

setInterval(function() {
  if ( didScroll ) {
    didScroll = false;

    if (isScrolledIntoView(marker) === true) {
      target.addClass('active')
    } else {
      target.removeClass('active')
    }
  }
}, 250);


基本上,滚动发生的唯一事情是将全局变量设置为true。 setInterval每四分之一秒检查一次该变量,并且只有在它检测到发生滚动时才将其设置回false并触发需要在滚动上运行的任何其他功能。

其次,让CSS处理内容的显示和隐藏可能会更有效,因此我将目标设置为显示:默认情况下不显示,并使用活动类使其可见:

.target {
  display: none;
}

.target.active {
  display: block;
}


这样做的好处是,您可以添加一些更好的CSS3过渡,例如可见性+不透明度或从屏幕外过渡,而不仅仅是无聊的旧显示/隐藏。

此处演示:https://jsfiddle.net/820ht8jw/2/

10-07 19:43
查看更多