CODEWITHSUNDEEP
javascripthtmlcssreactjs
Pavel Rishko
Pavel Rishko

Reputation: 15

Scroll is skipping header and starting from body

When site is loading, page starts from body and I have to scroll up to see styled header.

(But this problem does not appear on all browsers)

I want to start scrolling with the Header.

Here is the live site: http://pavlorishko228-001-site1.btempurl.com/

Code:

import React from "react";
import { Link } from 'react-router-dom';
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import Logo from '../../public/SmokeyWayLogo.svg';

const StyledLogo = styled("img")<{isScrolled: boolean}>`
  filter: ${props => props.isScrolled ? "invert(1)" : "drop-shadow(2px 4px 3px black)"};
  height: 80px;
  padding-left: 0;
  float: left;
`;

const StyledLink = styled("div")<{isScrolled: boolean}>`
  padding: 20px;
  margin: 10px;
  display: inline-block;
  border-radius: 5px;
  &:hover {
    box-shadow: 0px 0px 15px 2px  ${props => props.isScrolled ? "white" : "black"};
    color: black;
  }
  a {
    text-decoration: inherit;
    color: ${props => props.isScrolled ? "white" : "black"};
  }
`;

const StyledNav = styled("div")<{isScrolled: boolean}>`
  position: fixed;
  width: 100%;
  background-color: ${props => props.isScrolled ? "transparent " : "white"};
`;
  
function Header(){
  const _isScrolled = ScrollHandler();

    return(
        <header>
            <StyledNav isScrolled={_isScrolled}>
                <StyledLogo isScrolled={_isScrolled} src={Logo}></StyledLogo>
                <StyledLink isScrolled={_isScrolled}>
                    <Link to="./">Smokey Way</Link>
                </StyledLink>
                <StyledLink isScrolled={_isScrolled}>
                    <Link to="./">Головна</Link>
                </StyledLink>
                <StyledLink isScrolled={_isScrolled}>
                    <Link to="./">Меню</Link>
                </StyledLink>
            </StyledNav>
        </header>
    )
}
export default Header;

Upvotes: 1

Views: 237

Answers (1)

SoliMoli
SoliMoli

Reputation: 786

I used chrome on my device and was fine, I mean i saw your header after loading the page. Your problem is not normal and its kinda weird for me, But i suggest you JS (in this code before loading page it makes you to be sure that you are at the top of the current page) and give me the feedback:

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});

Upvotes: 2

Related Questions