sticky header css

fancyNancy answered on September 19, 2021 Popularity 10/10 Helpfulness 8/10

answer sticky header css

related css sticky header

related header sticky scroll

sticky header css

Comment

nav {
    position: sticky; top: 0;
}

Popularity 10/10 Helpfulness 8/10 Language css

Source: dev.to

Tags: css header sticky

Link to this answer
Share Copy Link

Contributed on Sep 19 2021

fancyNancy

0 Answers Avg Quality 2/10

Closely Related Answers

css sticky header

Comment

<!-- https://www.w3schools.com/howto/howto_js_sticky_header.asp -->

<style>

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

</style>

<script>
	window.onscroll = function() {myFunction()};

	var desktopHeader = document.getElementById("yourHeader");
	var stickyHeader = desktopHeader.offsetTop;

	function myFunction()
	{
		if(window.pageYOffset > stickyHeader) 
		{
			desktopHeader.classList.add("sticky");
		} 
		else 
		{
			desktopHeader.classList.remove("sticky");
		}
	}
</script>

Popularity 10/10 Helpfulness 5/10 Language html

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Oct 07 2022

Button

0 Answers Avg Quality 2/10

header sticky scroll

Comment

    window.addEventListener('scroll', function(){
        var nav = document.querySelector('nav');
        nav.classList.toggle('sticky', window.scrollY > 0);
    });

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: header he

Link to this answer
Share Copy Link

Contributed on Dec 12 2022

Sasuke Khan

0 Answers Avg Quality 2/10

sticky header css

Contents

More Related Answers

sticky header css

Closely Related Answers

css sticky header

header sticky scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.