React操作真實(shí)DOM實(shí)現(xiàn)動(dòng)態(tài)吸底部的示例
更新時(shí)間：2017年10月23日 08:21:04 作者：ZhangYi
本篇文章主要介紹了React操作真實(shí)DOM實(shí)現(xiàn)動(dòng)態(tài)吸底部的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
動(dòng)態(tài)吸底：開始時(shí)fixed在頁面上，當(dāng)頁面滾動(dòng)到距離底部一定距離的時(shí)fixed部分固定。
這個(gè)是需要計(jì)算頁面滾動(dòng)距離的，如果使用Jquery或者原生js實(shí)現(xiàn)是非常好實(shí)現(xiàn)的，但是由于使用react并不推崇操作DOM，但是如果使用virtual DOM的話是無法實(shí)現(xiàn)該效果的，所以還是要引入js去直接獲取DOM進(jìn)行操作。
react在componentDidMount之后頁面渲染完成，所以可以在這里面直接用js原生方法獲取DOM元素，進(jìn)而進(jìn)行操作。
componentDidMount() {
this.changeFixed()
}
//計(jì)算高度
changeFixed(){
//getDOMNode
const layoutNode = document.querySelectorAll('.page-layout')[0];
const orderPriceNode = document.querySelectorAll('.test-price')[0];
window.addEventListener('scroll', function (e) {
const windowInnerHeight = window.innerHeight;
const layoutNodeHeight = layoutNode.offsetHeight;
//滾動(dòng)超出視野距離
let scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
const distanceBottom = layoutNodeHeight - scrollTop - windowInnerHeight;
//120的時(shí)候吸底
if(distanceBottom <= 120){
orderPriceNode.classList.remove('fixed');
}else{
orderPriceNode.classList.add('fixed');
}
})
}
這樣就實(shí)現(xiàn)了當(dāng)距離底部120的時(shí)候吸底
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react是一個(gè)優(yōu)秀的框架,提供了我們很多的便利,但是在使用的過程中,我們也會(huì)遇到很多的問題,其中一個(gè)就是ref的使用,以下是我列出的5個(gè)使用ref的錯(cuò)誤用法,并提供了正確的用法,需要的朋友可以參考下2024-12-12
React框架快速實(shí)現(xiàn)簡(jiǎn)易的Markdown編輯器
這篇文章主要為大家介紹了使用React框架實(shí)現(xiàn)簡(jiǎn)易的Markdown編輯器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
詳解如何在React單頁面應(yīng)用中捕獲錯(cuò)誤
在當(dāng)前的Web開發(fā)中,使用React構(gòu)建單頁面應(yīng)用（SPA）已經(jīng)成為一種常見的做法,然而,當(dāng)應(yīng)用程序遇到錯(cuò)誤時(shí),有可能會(huì)導(dǎo)致整個(gè)頁面崩潰,給用戶帶來不好的體驗(yàn),本文將介紹如何在React單頁面應(yīng)用中捕獲錯(cuò)誤,以防止整個(gè)頁面的崩潰,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了如何基于react實(shí)現(xiàn)下拉刷新效果,在下拉的時(shí)候會(huì)進(jìn)入loading狀態(tài),文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了redux工作原理講解及使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-11-11
Hook是React16.8的新增特性,它可以讓你在不編寫class的情況下使用state以及其他的React特性,本文中講解的useState就是React中的其中一個(gè)Hook,這篇文章主要給大家介紹了關(guān)于React中useState理解和使用的相關(guān)資料,需要的朋友可以參考下2024-03-03
本文主要介紹了React配置子路由的實(shí)現(xiàn)，我們來通過一個(gè)簡(jiǎn)單的例子解釋一下如何配置子路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
從頭寫React-like框架的工程搭建實(shí)現(xiàn)
這篇文章主要介紹了從頭寫React-like框架的工程搭建實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)插槽的Layout組件
這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)注冊(cè)內(nèi)容的插槽組件,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以了解一下2025-02-02