移动端顶部导航跳转高亮效果及滚动网页时判断元素是否在视窗内

本文由清尘发表于2020-06-04 14:35属于javascript分类

效果:点击某个元素跳转到相应的部分,类似锚点跳转效果(在移动端应用了图片延迟加载时,锚点跳转位置会不正确)

var scroll2 = document.getElementById('scroll2');

$('#testbtn').bind('click',function(){
        console.log('滚动到某个元素区域')
        scroll2.scrollIntoView();
})

效果:移动端滚动页面时,到达某个区域,高亮对应导航。(判断元素是否在可视区域)

var scroll2 = document.getElementById('scroll2');

function elementInView(element) {
  const rect = element.getBoundingClientRect()
  const yInView = rect.top < window.innerHeight && rect.bottom > 0
  const xInView = rect.left < window.innerWidth && rect.right > 0
  return yInView && xInView
}



$(document).bind('scroll',function(){
    var inView = elementInView(scroll2);
    if(inView){
        console.log('进入视窗');
    }else{
        console.log('没有在视窗内');
    }
})