• [原创作品]web网页中的锚点


      因为近来在从事web前端开发的工作,所以写的文章也都是关于web这一块。以后将分享算法和web高级编程的内容,很多公司的web前端不够重视,以为是很low-level,给的待遇也很一般,其实,这都是很狭隘的理解。软件开发是一种很谨慎的工作,每一个环节都需要足够的重视。好了,不扯淡。需要扯淡的,点击左边信息栏加群按钮。

      今天分享的内容是网页锚点效果,就是在网页滚动到某个位置时,菜单有相应的变化。如图,

    就是在滚动时,菜单会有相应的选中效果,点击菜单时,定位到网页内容。

    菜单代码:

    1         <ul class="menu">
    2             <li><a href="#about-us">关于我们</a></li>
    3             <li><a href="#dynamic">动态</a></li>
    4             <li><a href="#case">案例</a></li>
    5             <li><a href="#service">服务</a></li>
    6             <li class="select"><a href="#index">首页</a></li>
    7         </ul>

    锚点的话就是在网页相应的位置加上id属性,这里是在section标签加的id,就行。重点看js代码:

     1    $(window).scroll(function () {
     2 
     3             $('section[id]').each(function(){
     4                 var id = $(this).attr('id');
     5                 var offsetTop = document.getElementById(id).getBoundingClientRect().top;
     6                 var offsetBtm = document.getElementById(id).getBoundingClientRect().bottom;
     7 
     8                 if(offsetTop < 0 && offsetBtm > 0) {
     9                     $('.menu li a[href]').parent().removeClass('select');
    10                     $('.menu li a[href=#'+id+']').parent().addClass('select');
    11                 }
    12             });
    13 
    14         });

      上面代码中getBoundingClientRect()的作用的将选取的dom元素作为矩形,其相对的位置是浏览器窗口的大小。.top是dom元素上边距距离浏览器窗口上边的距离,.bottom是dom元素下边距距离窗口上边距的距离。说白了,就是以浏览器左边,上边为基准。还有.left, .right,这个,博友应该明白什么意思了。当上边距小于等于0,且下边距大于0说明该元素在当前浏览器视图中。改变菜单的选中状态。

      因为a标签在li里面,而选中状态在li class="select",所以点击时应该这样写,

    1   $('.menu li').click(function(){
    2             window.location = $(this).find('a').attr('href');
    3             $(this).siblings().removeClass('select');
    4             $(this).addClass('select');
    5         });

    就是加上window.location,让页面跳转到相应的元素。

    好了,这部分不是难点,不做多余解释。原创作品,转载请注明出处:http://zhutty.cnblogs.com

  • 相关阅读:
    CentOS7安装Dnsmasq并更新最新版
    VMware vCenter Server Appliance(VCSA )6.7 部署,许可证破解
    vsphere6.7虚拟机与ESXI时间同步
    oracle使用存储过程返回数据集
    如何让CheckBoxList横着显示
    在oracle中创建自动增长字段
    oracle 11g安装客户端后使用ps/sql连接提示TNS适配器错误的解决办法
    myeclipse 网站项目部署失败
    Opera Dragonfly本地化
    ExtJs的fireEvent事件
  • 原文地址:https://www.cnblogs.com/zhutty/p/4644995.html
Copyright © 2020-2023  润新知