I wonder if there is any way in CSS to identify scroll scrolling

Question

I wonder if there is any way in CSS to identify scroll scrolling

Asked 5 years, 6 months ago

Viewed 109 times

0

I have a page where the header is in the top:0 position: Absolute, but I wanted it to change to position: Fixed, in case the user scrolls up.

Example: at the top of the page the menu will stay at the top even after 800px down, whenever q he try to scroll up (seeking the header again) it will appear at the top of the page fixed. So the user would not need to go to the top of the page to find the header.

Obs.: if you can’t do this in CSS, you can send a solution in the way you think most practical.

Example of how this menu:

container1 {
	position: absolute;
	right: 84px;
	bottom: 0px;
	margin-bottom: 17px;
}
#menu {
	height: 57px;
	border-bottom: 1px solid #C4C4C4;
	margin-top: 0px;
	background-color: #ffffff;
	min-width: 1120px;
	margin-left: -1%;
	position: absolute;
	top: 0px;
	width: 102%;
	z-index: 999;
}
#logo_s_frase_menu {
	width: 86.94px;
	height: 36.54px;
	position: absolute;
	left: 120px;
	margin-top: 10px;
}
#home_menu{
	padding-left: 35px;
	padding-right: 35px;
	color: #C4C4C4;
	border-top-left-radius: 1px;
	cursor: pointer;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-bottom: 16px;
}
#home_menu:hover{
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#home_menu:focus{
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#comofunciona_menu {
	height: 41px;
	width: 208px;
	padding-bottom: 16px;
	padding-left: 35px;
	padding-right: 35px;
	color: #C4C4C4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#comofunciona_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#comofunciona_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#quemsomos_menu {
	height: 41px;
	width: 180px;
	padding-bottom: 16px;
	padding-left: 35px;
	padding-right: 35px;
	color: #C4C4C4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#quemsomos_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#quemsomos_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#contato_menu {
	width: 147px;
	height: 41px;
	padding-bottom: 16px;
	padding-left: 36.5px;
	padding-right: 36.5px;
	color: #C4C4C4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#contato_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#contato_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#entrar_menu {
	width: 133px;
	height: 41px;
	padding-bottom: 16px;
	padding-left: 35px;
	padding-right: 35px;
	text-align: center;
	color: #c4c4c4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#entrar_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#entrar_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}

<header id="menu">
<a id="logo_menu" href="index.php"><img id="logo_s_frase_menu"  src="img/logo_s_frase.svg"></a>
<container1 id="caminho_menu">
<a id="home_menu" href=""><cxsb>HOME</cxsb></a>
<a id="comofunciona_menu"><cxsb>COMO FUNCIONA</cxsb></a>
<a id="quemsomos_menu"><cxsb>QUEM SOMOS</cxsb></a>
<a id="contato_menu"><cxsb>CONTATO</cxsb></a>
<a id="entrar_menu"><cxsb>ENTRAR</cxsb></a>
</container1>
</header>
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

In advance, only with CSS there is no way...

– hugocsl

2019/05/10 at 17:20
Possible duplicate of Set Menu Bar on Top

– Sam

2019/05/10 at 18:48

2 answers

Browser other questions tagged css rolling

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-05-10T18:51:51+00:00

Follow an example. As a reference I used this article

Follow the code of the image above, I left some comments in the code if you are interested.

// esconde Header no scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function (event) {
    didScroll = true;
});

setInterval(function () {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Assegura que o escroll seja maior que delta
    if (Math.abs(lastScrollTop - st) <= delta)
        return;

    // Se scrolled down passar de navbar, add class .nav-up.
    // Isso é necessário para vc não ver o que está por tras navbar.
    if (st > lastScrollTop && st > navbarHeight) {
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if (st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    padding-top: 40px;
}

header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up {
    top: -40px;
}

main {
    background-image: linear-gradient(to bottom, #fff 0%, #000 100%);
    height: 2000px;
}

footer {
    background: #ddd;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<header class="nav-down">
    menu.
</header>
<main>
    body.
</main>
<footer>
     footer.
</footer>

by Sam • **79,597** points · Answer 2 · 2019-05-10T19:31:29+00:00

You can use Javascript for this (CSS only is not possible). You activate the function only when it exceeds 800 pixels scroll, and every time you move up the page the menu is shown (fixed) and as he descends he returns to the beginning again (absolute):

document.addEventListener("DOMContentLoaded", function(){
   var fixa, pos;
   window.onscroll = function(){
      var scrl = window.scrollY;
      if(scrl > 800 && !fixa) fixa = true;
      document.querySelector("#menu").style.position = fixa && pos > scrl ? "fixed" : "absolute";
      pos = scrl;
   }
});

container1 {
	position: absolute;
	right: 84px;
	bottom: 0px;
	margin-bottom: 17px;
}
#menu {
	height: 57px;
	border-bottom: 1px solid #C4C4C4;
	margin-top: 0px;
	background-color: #ffffff;
	min-width: 1120px;
	margin-left: -1%;
	position: absolute;
	top: 0px;
	width: 102%;
	z-index: 999;
}
#logo_s_frase_menu {
	width: 86.94px;
	height: 36.54px;
	position: absolute;
	left: 120px;
	margin-top: 10px;
}
#home_menu{
	padding-left: 35px;
	padding-right: 35px;
	color: #C4C4C4;
	border-top-left-radius: 1px;
	cursor: pointer;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-bottom: 16px;
}
#home_menu:hover{
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#home_menu:focus{
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#comofunciona_menu {
	height: 41px;
	width: 208px;
	padding-bottom: 16px;
	padding-left: 35px;
	padding-right: 35px;
	color: #C4C4C4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#comofunciona_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#comofunciona_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#quemsomos_menu {
	height: 41px;
	width: 180px;
	padding-bottom: 16px;
	padding-left: 35px;
	padding-right: 35px;
	color: #C4C4C4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#quemsomos_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#quemsomos_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#contato_menu {
	width: 147px;
	height: 41px;
	padding-bottom: 16px;
	padding-left: 36.5px;
	padding-right: 36.5px;
	color: #C4C4C4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#contato_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#contato_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#entrar_menu {
	width: 133px;
	height: 41px;
	padding-bottom: 16px;
	padding-left: 35px;
	padding-right: 35px;
	text-align: center;
	color: #c4c4c4;
	margin-left: -4px;
	cursor: pointer;
	text-decoration: none;
}
#entrar_menu:hover {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}
#entrar_menu:focus {
	border-bottom: 3px solid #444CF0;
	color: #444CF0;
}

<header id="menu">
   <a id="logo_menu" href="index.php"><img id="logo_s_frase_menu"  src="img/logo_s_frase.svg"></a>
   <container1 id="caminho_menu">
      <a id="home_menu" href=""><cxsb>HOME</cxsb></a>
      <a id="comofunciona_menu"><cxsb>COMO FUNCIONA</cxsb></a>
      <a id="quemsomos_menu"><cxsb>QUEM SOMOS</cxsb></a>
      <a id="contato_menu"><cxsb>CONTATO</cxsb></a>
      <a id="entrar_menu"><cxsb>ENTRAR</cxsb></a>
   </container1>
</header>
a<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>