جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
saeed ghezel arsalan
2 سال پیش توسط saeed ghezel arsalan مطرح شد
2 پاسخ

نمایش و پنهان شدن نوبار وقتی اسکرول میشه

تو کد زیر بعد از اینکه صفحه 250 پیکسل اسکرول میشه ، نَوبار پنهان میشه. حالا میخوام بدونم علاوه بر این قابلیت ، چطور کد زیر با استفاده از React Hooks میتونم تغییر بدم که وقتی هم صفحه اسکرول به سمت بالا بشه ، نوبار نمایش داده بشه؟


import React, {useState,useEffect} from 'react'
import './Navbar.css';
import {Link} from 'react-router-dom';
const Navbar = () => {
  const [show, setShow] = useState(false)
  const controlNavbar = () => {
  if (window.scrollY > 250 ) {
      setShow(true)
  }else{
    setShow(false)
  }
  }

  useEffect(() => {
  window.addEventListener('scroll', controlNavbar)
  return () => {
      window.removeEventListener('scroll', controlNavbar)
  }
  }, [])
return(

  <header className={`active ${show && 'hidden'}`}>
</header>
)}

این هم کد css:

.active{
height: 4rem;
width: 100%;
position: fixed;
top: 0px;
transition: 0.3s linear;
display: flex;
justify-content:stretch;
align-items: center;
background-color: #FFFFFF;
border-bottom: 1px solid rgba(0, 0, 0, .1);
z-index: 40;
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
/* padding: 0 7%; */
}
.hidden{
height: 4rem;
width: 100%;
z-index: 40;
border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .08);
position: fixed;
top: -80px;
transition: 0.3s linear;
}

ثبت پرسش جدید
saeed ghezel arsalan
@saeedghezelarsalan 2 سال پیش آپدیت شد
محمد زورمند
تخصص : react developer
@SpyStar0003 2 سال پیش مطرح شد
1

خیلی اتفاقی امروز این مشکل برام پیش اومد و هرچی فکر کردم یادم نیومد !
تو سایت سرچ زدم که ببینم کسی جواب داده یا نه و چشم خورد به سوالتون !
البته من تو React به کار نبردم ولی شما خیلی راحت می تونید این موارد رو تو React به کار ببرین فکر نمی کنم نیازی به استفاده از state داشته باشه !

این کد js

window.addEventListener("scroll" , () => {
    if(window.scrollY > 55) {
        lightNavbar.classList.add("d-fixed");
    } else if(lightNavbar.classList.contains("d-fixed")) {
        lightNavbar.classList.remove("d-fixed");
    }
})

اینم کد css

@keyframes navtransform {
    0% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}

.d-fixed {
    position: fixed;
    top: 0;
    animation: navtransform 1s;
}

میدونم جواب خیلی دیر ارسال شده و عملاً بی فایده است ولی حداقل برا نفرات بعدی مفید خواهد بود !😐


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام