Sitesurface Design
  • Home
  • Best Web Designs
  • Illustrations

    Free Colorful Wavy Background

    Tropical Floral Pattern

    Bromello Modern Script Typeface

    A5 Fashion Magazine Template

    H1 Sans Serif Typeface

    Hanging Poster Mockup

    Space Vector Typography

    Free Handwritten Script Font

    Typer Modern Serif Typeface

  • Fonts
  • UI Designs
  • Resources
No Result
View All Result
Thursday, February 2, 2023
Sitesurface Design
  • Home
  • Best Web Designs
  • Illustrations

    Free Colorful Wavy Background

    Tropical Floral Pattern

    Bromello Modern Script Typeface

    A5 Fashion Magazine Template

    H1 Sans Serif Typeface

    Hanging Poster Mockup

    Space Vector Typography

    Free Handwritten Script Font

    Typer Modern Serif Typeface

  • Fonts
  • UI Designs
  • Resources
No Result
View All Result
Thursday, February 2, 2023
Sitesurface Design
No Result
View All Result

Sticky Header

March 2, 2022
in Code Snippets
Share on FacebookShare on Twitter

1. Simple Sticky Header

 

CSS

.sticky {
position: fixed !important;
top: 0;
width: 100%;
-webkit-box-shadow: 0 4px 12px 0 rgb(0 0 0 / 5%);
box-shadow:0 4px 12px 0 rgb(0 0 0 / 5%);
}

JS

window.onscroll = function() {myFunction()};
var header = document.getElementById("site-header");
var sticky = header.offsetTop;
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

2. Advance Sticky header with light and dark logo replace effect

 

CSS

#site-header{
	transition: all .5s;
}
.sticky {
  position: fixed !important;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 4px 12px 0     rgb(0 0 0 / 5%);
 box-shadow:0 4px 12px 0 rgb(0 0 0 / 5%);	
	background-color: #fff !important;
	transition: all .5s;
}
.sticky #site-navigation-wrap .dropdown-menu >li >a{
	color:#000;
}
.sticky .oceanwp-mobile-menu-icon a{
	color:#000;
}
.sticky #site-header-inner {
    padding-top: 0px;
	transition: all .5s;
}
#site-header-inner{
	transition: all .5s;
}
.sticky .custom-logo-link {
    background-image: url('https://sitesurface.com');
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    max-width:200px;		
}
.sticky .custom-logo{
	opacity:0;
}

Js

window.onscroll = function() {myFunction()};
var header = document.getElementById("site-header");
var sticky = header.offsetTop;
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
ShareTweetSend

Related Posts

No Content Available
Next Post

Magazine Cover Template

Free Photoshop Text Style

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

iPhone Back Case Mockup

December 29, 2021

Sticky Header

March 2, 2022

Magazine Cover Template

January 3, 2022

Realistic Cup Mockup

January 1, 2022

Categories

  • Code Snippets
  • Fonts
  • Icons
  • Illustrations
  • Mockups
  • Templates
  • UI-Kits
  • Uncategorized

Subscribe

Join over 12.000 + subscribers & be the first to get new designs.

About

Sitesurface Design is a cooperative effort led by a group of designers, writers, and developers at Sitesurface. We work across teams to publish original content, produce events, and creatives and educational workshops that advance design and technology.

  • Home
  • UI Designs
  • Privacy Policy
  • Terms of Service
No Result
View All Result
  • Home
  • Best Web Designs
  • Illustrations
  • Fonts
  • UI Designs
  • Resources