24 Sticky Nav 中文指南

优质
小牛编辑
137浏览
2023-12-01

挑战任务

初始文档index-start.html提供了一篇仿博客文章的HTML文件布局,包括标题栏,导航以及正文部分,本次的编程挑战任务为:编写代码,使得当页面向下滚动至标题栏从可视区消失时,将导航栏固定在页面顶部,并显示页面LOGO(初始文档中已提供)以便后续导航;当页面向上滚动至标题栏重新出现在可视区域时,导航栏恢复初始设置。

实现效果

结果展示

编程思路

通过为指定元素设置position:fixed样式即可将其固定至页面指定位置。代码编写中配合监听页面滚动事件,判断页面的当前滚动位置,动态切换指定元素的position属性即可。

过程指南

html页面中在导航栏提供了LOGO标签,初始最大宽度被设置为0而隐藏,固定导航栏时可同时修改LOGO标签的max-width属性,将其显示出来

1.获取导航栏相对于整个文档的位置,将其记录为切换点

  1. var oNav = document.getElementById('main');
  2. var changePoint = oNav.offsetTop;

2.编写动态改变导航栏样式的函数

  1. function adjustNav(){
  2. //当滚动距离超过切换点时为导航栏添加类,CSS中后写的样式会覆盖先书写的样式
  3. if(window.scrollY >= changePoint){
  4. oNav.className = 'fixed-nav';
  5. oLogo.style['max-width'] = '200px';
  6. }else{
  7. //当滚动距离小于切换点时,恢复导航栏的定位样式
  8. oNav.className = '';
  9. oLogo.style['max-width'] = '0';
  10. }
  11. }

3.将调整函数绑定至窗口滚动事件

  1. window.addEventListener('scroll',adjustNav);

延伸思考

页面内锚点滚动也是常见的功能之一,当使用哈希跳转来实现时,往往会显得很突兀(index-finished-Dashrun.html中已添加锚点,点击导航栏按钮即可看到效果)。我们更希望实现页面的平滑过渡(jQuery中可轻松实现,不过还是建议自己造一下试试),实现的方法即为使用函数来平滑改变窗口滚动位置至目标位置。