美文网首页
导航锚点定位相关

导航锚点定位相关

作者: Spidd | 来源:发表于2020-05-08 12:27 被阅读0次

功能阐述:点击不同导航。滚动到不同内容区;

/*跳转锚点*/
    handleClick(tab, event) {
      let el = $('#' + this.activeName);
      if(el.length !== 0){
        var t = el.offset().top + $('.smartReview-right').scrollTop();
        $('.smartReview-right').animate({scrollTop:t},500);
      }
    },
$(".smartReview-right").scroll(function(){  // 根据滚动判断当前应该是哪个锚点
      var wScrollTop = $(".smartReview-right").scrollTop();
      $('.smartReview-right>div').each((index,event)=>{
        let el = $('.smartReview-right>div').eq(index);
        var t = el.offset().top + $('.smartReview-right').scrollTop();
        if(wScrollTop <= t){
          me.activeName = el.attr('id');
          return false; //找到第一个合适的就跳出终止。防止一直是最大的导航。
        }
      })
    });

功能效果


企业微信截图_1588912042145.png

相关文章

  • 导航锚点定位相关

    功能阐述:点击不同导航。滚动到不同内容区; 功能效果企业微信截图_1588912042145.png

  • hash锚点定位偏移问题之用js方法解决

    当我们使用a标签做锚点定位的时候,如果有做固定顶部导航栏的话,直接定位到锚点的时候,会发现定位的位置相较于锚点往下...

  • 锚点定位和动态导航

    需求:右侧有导航栏,点击可以跳转到页面指定位置,同时页面滚动到指定的位置,右侧的导航栏也根据位置进行高亮变化。CS...

  • 有关导航栏锚点定位问题

    写页面的时候遇到导航栏固定定位不占空间导致锚点定位不准确,百度了一下,解决方案如下: 页面如下:

  • Android tabLayout+recyclerView实现

    在上一篇文章 Android 实现锚点定位中,我们介绍了tablayout+scrollView实现的锚点定位,今...

  • 锚点定位

    步骤: 分两步做 代码

  • Android 实现锚点定位

    相信做前端的都做过页面锚点定位的功能,通过 去设置页面内锚点定位跳转。本篇文章就使用tablayout、scro...

  • 锚点偏移

    前言 源码锚点定位很常用,不过有个蛋疼的问题,它是以界面顶部定位,那么一旦界面顶部有导航栏(fixed)之类的,那...

  • 语法

    a标签的锚点定位:一是通过ID。二是通过 标签本身的name属性来查找 例如在两个页面中的锚点定位跳转:

  • vue 进行滚动条定位

    锚点定位:document.getElementsByClassName('scroll-panel')[inde...

网友评论

      本文标题:导航锚点定位相关

      本文链接:https://www.haomeiwen.com/subject/raffnhtx.html