jq实现锚点,导航栏锁定,回到顶部及滚动监听动画效果

一.html

		      <nav class="nav">
		    <a class="active" href="#sec1">免联考MBA</a> 
		    <a href="#sec2">1+1项目</a>  
		    <a href="#sec3">申请流程</a>  
		    <a href="#sec4">学员大数据</a>  
		    <a href="#sec5">报名常见问题</a>   
		  </nav>
		
		  <h2 id="sec1">免联考MBA硕士</h2>
		  <div class="sec1">内容</div>
		  <h2 id="sec2">1+1项目</h2>
		  <div class="sec2">内容</div>
		  <h2 id="sec3">申请流程</h2>
		  <div class="sec3">内容</div>
		  <h2 id="sec4">学员大数据</h2>
		  <div class="sec4">内容</div>
		  <h2 id="sec5">报名常见问题</h2>
		  <div class="sec5">内容</div>
		
		  <button>回到顶部</button>

二.css

	    *{
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	    text-decoration: none;
	  }
	  body{
	    height: 6000px;
	  }
	  .clearfix{
	    content: "";
	    clear: both;
	    display: block;
	  }
	  header{
	    width: 100%;
	    height: 250px;
	    background: url(./apply-banner.jpg) no-repeat;
	    background-size:  cover;
	  }
	  .nav{
	    background: white;
	    width: 1000px;
	    margin: 0 auto;
	    border-bottom: 4px solid #1C3C34;
	    font-size: 0;
	  }
	  .nav a{
	    display:inline-block;
	    font-size: 20px;
	    color: #1C3C34;
	    line-height: 28px;
	    padding: 11px 0px;
	    text-align: center;
	    box-sizing: border-box;
	    width: 20%;
	    cursor: pointer;
	  }
	  .nav .active{
	    background: #1C3C34;
	    color: white;
	  }
	
	  h2,div{
	    width: 1000px;
	    margin: 0 auto;
	    line-height: 300px;
	    text-align: center;
	  }
	  div{
	    line-height: 800px;
	    font-size: 50px;
	  }
	  .sec1{
	    background: aquamarine;
	  }
	  .sec2{
	    background: yellowgreen;
	  }
	  .sec3{
	    background: blueviolet;
	  }
	  .sec4{
	    background: cadetblue;
	  }
	  .sec5{
	    background: darkmagenta;
	  }
	  .nav.active{
	    position: fixed;
	    top: 0;
	    /* left: 259.5px; */
	  }
	  button{
	    position: fixed;
	    bottom: 20px;
	    right: 20px;
	  }

三.jq

      // 锚点
  $("a").click(function(){
    $(this).addClass("active").siblings().removeClass("active")
  })
  // 滚动条事件
  var navH=$(".nav").offset().top;// 导航与顶部的高度
  var sec1H=$("#sec1").offset().top;// sec1与顶部的高度
  var sec2H=$("#sec2").offset().top;// sec2与顶部的高度
  var sec3H=$("#sec3").offset().top;// sec3与顶部的高度
  var sec4H=$("#sec4").offset().top;// sec4与顶部的高度
  var sec5H=$("#sec5").offset().top;// sec5与顶部的高度

  $(window).scroll(function(){

    // 固定导航
    if($(document).scrollTop()>navH){
      
      $(".nav").addClass("active")
      
      var lefts=($(window).width()-$(".nav").width())/2
      // console.log(lefts);
     
      $(".nav.active").css(
       "left",lefts+"px",
      )

    }else{
      $(".nav").removeClass("active")
    }
    // 滚动高亮

    if($(document).scrollTop()>=sec1H&&$(document).scrollTop()<sec2H){
      $("a").eq(0).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec2H&&$(document).scrollTop()<sec3H){
      $("a").eq(1).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec3H&&$(document).scrollTop()<sec4H){
      $("a").eq(2).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec4H&&$(document).scrollTop()<sec5H){
      $("a").eq(3).addClass("active").siblings().removeClass("active")
    }else if($(document).scrollTop()>=sec5H){
      $("a").eq(4).addClass("active").siblings().removeClass("active")
    }

  })
// 回到顶部
  $("button").click(function(){
    $("html").animate({
        "scrollTop":"0"
      },1000);
  })
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现滚动监听锚点,可以使用Vue的指令和一些JavaScript代码。 首先,我们可以使用Vue的指令来绑定滚动事件。在模板中,我们可以这样使用指令: ```html <div v-scroll="handleScroll"> <!-- content --> </div> ``` 然后,在Vue实例中,我们需要定义handleScroll方法来处理滚动事件。在这个方法中,我们可以使用JavaScript来获取到当前滚动的位置,再根据锚点的位置来判断是否需要触发滚动监听事件。代码如下: ```javascript methods: { handleScroll() { const anchors = document.querySelectorAll('a[id]') const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop for (let i = 0; i < anchors.length; i++) { const anchor = anchors[i] const offsetTop = anchor.getBoundingClientRect().top + scrollTop if (offsetTop <= scrollTop + 100) { // 触发滚动监听事件 this.$emit('scroll', anchor.getAttribute('id')) } } } } ``` 在这个方法中,我们首先使用document.querySelectorAll方法获取到所有带有id属性的锚点。然后,使用window.pageYOffset、document.documentElement.scrollTop和document.body.scrollTop来获取到当前的滚动位置。接着,遍历所有锚点,使用getBoundingClientRect方法获取到锚点相对于视口的位置,再加上scrollTop,就可以获取到锚点相对于文档的位置。如果当前滚动位置加上一个偏移量(这里是100)大于等于锚点的位置,就触发滚动监听事件。 最后,我们可以在父组件中监听scroll事件,来处理滚动到特定锚点的逻辑。代码如下: ```html <template> <div> <div v-scroll="handleScroll"> <!-- content --> </div> <div v-for="anchor in anchors" :key="anchor"> <a :href="'#' + anchor">{{ anchor }}</a> </div> </div> </template> <script> export default { data() { return { anchors: ['anchor1', 'anchor2', 'anchor3'] } }, methods: { handleScroll(anchor) { console.log('scroll to', anchor) } } } </script> ``` 在这个例子中,我们在父组件中定义了一个anchors数组,它包含了所有锚点的id。然后,在模板中,我们使用v-for指令来生成所有锚点的链接。当触发scroll事件时,我们可以获取到当前滚动到的锚点的id,并且在控制台输出它的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值