您当前的位置:网站首页>JS>手把手教你如何实现前端的吸顶效果 找JS教程就上ki4.cc (>^ω^<),js,吸顶效果

手把手教你如何实现前端的吸顶效果 找JS教程就上ki4.cc (>^ω^<),js,吸顶效果

2020年07月07日 投稿作者: 围观人数:8

聊聊JavaScript人脸识别技术 找JS教程就上ki4.cc (>^ω^<)

我一直对人工智能识别技术非常感兴趣,因为我无法想象这究竟是一种什么样的算法,什么样的分析过程,,,无论是声音识别、人脸面部识别或其它种识别,人们的外貌、说话的方式都是如此不同,一种图片你可以用不同的方式、我不能理解这些识别技术是如何做到的。

前端实现吸顶效果

1、监听scroll事件,实现吸顶功能

2、css实现吸顶

写页面经常会遇到这种需求:导航菜单初始位置不在头部,滑动页面时候当导航菜单滑到头部位置就固定在头部,往下滑导航菜单又回到初始位置。

网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)

(javascript)        document.documentElement.scrollTop //firefox

(javascript)        document.documentElement.scrollLeft //firefox

(javascript)        document.body.scrollTop //IE

(javascript)        document.body.scrollLeft //IE

(jqurey)             $(window).scrollTop() 

(jqurey)             $(window).scrollLeft()

网页工作区域的高度和宽度

(javascript)       document.documentElement.clientHeight// IE firefox       

(jqurey)             $(window).height()

元素距离文档顶端和左边的偏移值

(javascript)        DOM元素对象.offsetTop //IE firefox

(javascript)        DOM元素对象.offsetLeft //IE firefox

(jqurey)             jq对象.offset().top

(jqurey)             jq对象.offset().left

获取页面元素距离浏览器工作区顶端的距离

javascript调试之console.table() 找JS教程就上ki4.cc (>^ω^<)

昨天我了解到Chrome调试工具一个小巧的调试方法,在WDCC期间,【 Marcus Ross(@zahlenhelfer) 】介绍了,chrome调试工具各种调试方法,这个只是其中一种,现在我来给大家秀下。

页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度

即:

页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop - document.documentElement.scrollTop

1、监听scroll事件,实现吸顶功能

window.addEventListener("scroll",()=>{
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
    let offsetTop = document.querySelector('#searchBar').offsetTop;
    if (scrollTop > offsetTop) {
         document.querySelector('#searchBar').style.position="fixed";
         document.querySelector('#searchBar').style.top="0";
    } else {
         document.querySelector('#searchBar').style.position="";
         document.querySelector('#searchBar').style.top="";
    }})

2、css实现吸顶

position: sticky;
top:0

感谢大家的阅读,希望大家收益多多

本文转自:https://blog.csdn.net/zqyzqy22/article/details/90634702

推荐教程:《JS教程》

以上就是手把手教你如何实现前端的吸顶效果的详细内容,更多请关注ki4导航其它相关文章!

Web程序员必备 Console 对象里的九个方法 找JS教程就上ki4.cc (>^ω^<)

console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作,下面介绍Console对象里的九个方法,方便大家使用。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.