脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS吸顶条

JS实现网站吸顶条

 更新时间：2020年01月08日 09:38:53   作者：private白  
这篇文章主要为大家详细介绍了JS制作网站吸顶条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现网站吸顶条的具体代码，供大家参考，具体内容如下

今天写一个关于网站中吸顶条的思路

  1、吸顶条就是在网页移动到一定距离的时候，让某个内容，固定显示在一个位置

  2、获取网页中滚动条的滚动距离

  3、判断要显示的内容在滚动条，滚动到一定距离后，让他显示

下面是代码部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 #content{
  width: 100%;
  height: 50px;
  background: red;
 }
 .father{
  position: fixed;
  top:0;
  left: 0;
 }
 </style>
</head>
<body style="height: 3000px;">
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <p>kdsjfkljsdklfjd</p>
 <div id="content"></div>
</body>
<script>
//绑定滚动条移动事件
window.onscroll = function(){
 var bb = document.body.scrollTop || document.documentElement.scrollTop;//解决浏览器兼容问题
 if(bb >500){
      //小与500的时候，让它添加这个类
 content.className = "father"
 }else{
      //否则就是空
 content.className = "";
 }
}
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js闭包学习心得总结

    js闭包学习心得总结

    这篇文章主要介绍了JS闭包的学习心得，以及分析其中遇到的问题，需要的朋友跟着参考下吧。
    2018-04-04
  • JS字符串函数扩展代码

    JS字符串函数扩展代码

    JS字符串函数扩展代码，大家可以参考下prototype的使用方法，扩展自己的字符串处理函数。
    2011-09-09
  • swiper自定义分页器使用方法详解

    swiper自定义分页器使用方法详解

    这篇文章主要为大家详细介绍了swiper自定义分页器的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • JS函数本身的作用域实例分析

    JS函数本身的作用域实例分析

    这篇文章主要介绍了JS函数本身的作用域,结合实例形式分析了JS函数作用域相关原理、操作技巧与使用注意事项,需要的朋友可以参考下
    2020-03-03
  • js点击时关闭该范围下拉菜单之外的菜单方法

    js点击时关闭该范围下拉菜单之外的菜单方法

    下面小编就为大家分享一篇js点击时关闭该范围下拉菜单之外的菜单方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • js实现购物车商品数量加减

    js实现购物车商品数量加减

    这篇文章主要为大家详细介绍了js实现购物车商品数量加减，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Router解决跨模块下的页面跳转示例

    Router解决跨模块下的页面跳转示例

    开始模块化开发项目之后，一个很重要的问题就是页面见的跳转问题，这篇文章主要介绍了Router解决跨模块下的页面跳转示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript数据可视化:ECharts制作地图

    JavaScript数据可视化:ECharts制作地图

    这篇文章主要介绍了Echarts实现可视化地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-08-08
  • 常用DOM整理

    常用DOM整理

    js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
    2015-06-06
  • JavaScript继承的特性与实践应用深入详解

    JavaScript继承的特性与实践应用深入详解

    这篇文章主要介绍了JavaScript继承的特性与实践应用,结合实例形式较为深入的分析了javascript继承相关概念、特性、原理、用法及操作注意事项,需要的朋友可以参考下
    2018-12-12

最新评论