Amigos tengo un código de un botón flotante de manera que al bajar en la pagina el botón se muestre de forma automática y se oculte cuando esta arriba en la pagina, el codigo me funciona perfecto usando html css y javascript.... pero ahora que ando en el mundo de react js quiero darle uso a ese codigo, este es el codigo del boton flotante en javascript puro:
css
.cmn-divfloat {
position: fixed !important;
bottom: 45px;
right: 15px;
display: none;
}
.cmn-btncircle {
width: 40px !important;
height: 40px !important;
padding: 6px 0px;
border-radius: 15px;
font-size: 18px;
text-align: center;
}
html
<div id="div-totop" class="cmn-divfloat">
<a href="#span-top" class="btn btn-primary cmn-btncircle">
<i class="fa fa-arrow-up"></i>
</a>
</div>
javascript
(function() {
//a partir de que punto del scroll vertical de la ventana mostrará el botón
const ishow = 115
const $divtop = document.getElementById("div-totop")
window.addEventListener("scroll", function() {
if(document.documentElement.scrollTop > ishow){
$divtop.style.display = "inherit"
}
else {
$divtop.style.display = "none"
}
})
})()
Trate de transportarlo a react pero me aaroja error en esta linea:
TypeError: Cannot read property 'style' of null
(anonymous function)
C:/Users/cli/Documents/React/news/src/Component/Nav/Nav.js:38
35 | $divtop.style.display = "inherit"
36 | }
37 | else {
> 38 | $divtop.style.display = "none"
39 | }
40 | })
41 | })()
View compiled
componente en react JS
export default class Nav extends Component {
render() {
return (
<nav className="navbar-fixed-left">
<ul>
</ul>
<div id="div-totop" class="cmn-divfloat">
<a href="#span-top" class="btn btn-primary cmn-btncircle">
<i class="fa fa-arrow-up"></i>
</a>
</div>
</nav>
)
}
}
function = () => {
const ishow = 115
const $divtop = document.getElementById("div-totop")
window.addEventListener("scroll", function() {
if(document.documentElement.scrollTop > ishow){
$divtop.style.display = "inherit"
}
else {
$divtop.style.display = "none"
}
})
}
¿Para el caso de react js que debo cambiarle?
Hay algo que no entiendo, que es que uno declaraba la funcion y desde javascript se manejaba, ahora desde react no entiendo muy bien como se deberia llamar esa función,
gracias de antemano