score:0
alright i figured it out, i was just going about it the hard way as per usual. here's my new solution:
import react, { useeffect, usestate } from 'react';
import { navbar, navitem } from 'reactstrap';
import './nav.css';
function nav() {
let nav = 'nav';
const [scrolled, setscrolled] = usestate();
const handlescroll = () => {
setscrolled(document.documentelement.scrolltop);
};
useeffect(() => {
window.addeventlistener('scroll', handlescroll);
return () => window.removeeventlistener('scroll', handlescroll);
});
if (scrolled > 0) {
nav = 'nav scrolled';
}
return (
<navbar classname={nav}>
<div classname='items-box'>
<navitem classname='nav-item'>projects</navitem>
<navitem classname='nav-item'>
<strong>name</strong>
</navitem>
<navitem classname='nav-item'>resume</navitem>
</div>
</navbar>
);
}
export default nav;
css
.nav {
align-content: center;
text-align: center;
flex: auto;
width: 60%;
color: black;
margin: auto;
background-color: white;
height: 4rem;
top: 3rem;
transition: width 0.7s linear, top 0.1s;
}
.nav.scrolled {
width: 100%;
margin: auto;
top: 0;
position: sticky;
}
.items-box {
list-style: none;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.nav-item {
margin-left: 1rem;
margin-right: 1rem;
transition: 0.3s;
}
.nav-item:hover {
cursor: pointer;
color: forestgreen;
}
turns out using position: fixed snaps the navbar to the left pane of the window which makes it expand un-evenly. just using position sticky and transitioning like so works just perfectly.
Source: stackoverflow.com
Related Query
- CSS transition only firing on class return React.js
- How do you get a fade-in transition while using React useState hook to change class instead of CSS className:hover?
- React css transition does not work correctly
- React Only return props.children
- Node + React - Hyphenated CSS Class Names
- What exactly is the timeout value in React CSS Transition Group doing?
- "Missing return type on function" for every React class method
- React : CSS class name import not working
- React CSS - how to apply CSS to specific pages only
- React js css class background image not visible
- React toggle class + CSS transitions, not working... why?
- CSS class selector styles not being applied in React Project
- How to make React input onChange set state only after onChange stops firing for set time?
- ReactJS: Toggle class for css transition
- React Transition CSS animation flickering
- Staggering components on enter with react css transition group
- How to toggle class for the only one element on click in react
- In React how to import only needed Bootstrap styles. Bootstrap css modules?
- React adding css class without rerender
- Adding style attributes to a css class dynamically in react app
- Toggle css class in React
- Only use the CSS of Material UI React Components
- How to toggle css class of a single element in a .map() function in React
- How to add a CSS class to an element on click - React
- React CSS Transition Inconsistency Through Updates
- Refresh the page only once in react class component
- React - Apply **active** class to an element using CSS modules
- Ant Design Table expanded change CSS class | React
- Load React chunk CSS only when it's needed
- webpack and react recognise css class names
More Query from same tag
- MakeStyles (Material UI) apply style to child element
- Getting either an 500 internal server error or invalid value for stripe.confirmCardPayment
- Unable to capture onClick events on Marker's children included in deck.gl@^7.1.10
- npm stuck at "Starting the development server..."
- How to preload custom font face in react js?
- How do I embed a SVG created by React.createElement?
- How to create a HOC using component as parameter
- react native custom TextInput onchangeText Not working
- React: Prevent Right Click from focusing an otherwise focusable element
- Dynamic import style and set scss variable value
- SSR with Lerna + React + Styled components
- ReactDnD sorting elements not updating on Dragging
- In mobX can a store "listen" to other another store, and execute a query whenever the other store changes?
- CSS not being applied to component in React
- issue with set timeinterval in reactjs
- React - Running count of components in children (e.g. for footnotes)
- Lodash debounce TypeError: Expected a function react
- Image from json file is not displayed on the website
- Antd Resizable table columns in TypeScript
- gh-pages fails on `run deploy`
- How to detect Esc Key Press in React and how to handle it
- What's the problem when trying to render the cards?
- How to send data from React to Node?
- React - is there a similar way of declaring state properties?
- React.default.memo is not a function (React-Native) wrapWithConnect
- count repeated array of object property to produce a new array
- webview in react native when click on any link in website which open in new tab or new window its goes to browser not override on the webview
- Unsorted table data is rendered along with sorted data in table
- How can i add a condition in a modal using bootstrap-4-react?
- Why is my React Authentication component using AWS Amplify being rendered infinitely when using React Router V6 to protect routes