React操作真實DOM實現(xiàn)動態(tài)吸底部的示例
更新時間：2017年10月23日 08:21:04 作者：ZhangYi
本篇文章主要介紹了React操作真實DOM實現(xiàn)動態(tài)吸底部的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
動態(tài)吸底：開始時fixed在頁面上，當(dāng)頁面滾動到距離底部一定距離的時fixed部分固定。
這個是需要計算頁面滾動距離的，如果使用Jquery或者原生js實現(xiàn)是非常好實現(xiàn)的，但是由于使用react并不推崇操作DOM，但是如果使用virtual DOM的話是無法實現(xiàn)該效果的，所以還是要引入js去直接獲取DOM進(jìn)行操作。
react在componentDidMount之后頁面渲染完成，所以可以在這里面直接用js原生方法獲取DOM元素，進(jìn)而進(jìn)行操作。
componentDidMount() {
this.changeFixed()
}
//計算高度
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;
//滾動超出視野距離
let scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
const distanceBottom = layoutNodeHeight - scrollTop - windowInnerHeight;
//120的時候吸底
if(distanceBottom <= 120){
orderPriceNode.classList.remove('fixed');
}else{
orderPriceNode.classList.add('fixed');
}
})
}
這樣就實現(xiàn)了當(dāng)距離底部120的時候吸底
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ReactJS?應(yīng)用兼容ios9對標(biāo)ie11解決方案
這篇文章主要為大家介紹了ReactJS?應(yīng)用兼容ios9對標(biāo)ie11解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
通過React-Native實現(xiàn)自定義橫向滑動進(jìn)度條的 ScrollView組件
開發(fā)一個首頁擺放菜單入口的ScrollView可滑動組件,允許自定義橫向滑動進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序為縱向由上至下依次排列,對React Native橫向滑動進(jìn)度條相關(guān)知識感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了React如何接收excel文件下載導(dǎo)出功能封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
關(guān)于react hook useState連續(xù)更新對象的問題
這篇文章主要介紹了關(guān)于react hook useState連續(xù)更新對象的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了react-router6.x路由配置及導(dǎo)航,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了react常用的基礎(chǔ)知識總結(jié)，幫助大家更好的理解和學(xué)習(xí)使用react框架，感興趣的朋友可以了解下2021-04-04
React Navigation 使用中遇到的問題小結(jié)
本篇文章主要介紹了React Navigation 使用中遇到的問題小結(jié)，主要是安卓和iOS中相對不協(xié)調(diào)的地方，特此記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了react批量引入svg圖標(biāo)的方法,在批量引入之前,我們需要安裝一個包并配置到typescript.json文件中,需要的朋友可以參考下2024-03-03
React useContext與useReducer函數(shù)組件使用
useContext和useReducer 可以用來減少層級使用, useContext，可以理解為供貨商提供一個公共的共享值，然后下面的消費(fèi)者去接受共享值，只有一個供貨商，而有多個消費(fèi)者，可以達(dá)到共享的狀態(tài)改變的目的2023-02-02
這篇文章主要介紹了詳解react阻止無效重渲染的多種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12