Reduce UL padding during scroll

Asked

Viewed 92 times

1

How do I make to reduce the padding of UL fixed of 40px for 20px after scrolling the screen on 10px only using CSS?

I tried as below but nay worked:

		html, body {
		margin: 0;
		padding: 0;	
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: content-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/		
	}
			
	ul#menu {
		position: fixed;
		width: 100vw;
		margin: 0 auto;
		padding: 40px 0;	
		border: .1px solid #000;
	}
	
	ul#menu li {
		display: inline-block;
		width: 20%;
		height: 100px;
		line-height: 100px;
        text-align: center;
	}
	
	@media screen and (min-height: 10px) {   
		ul#menu {
			padding: 20px 0;
		}
	}
<ul id='menu'>
       <li>Menu 1</li><!--
	--><li>Menu 2</li><!--
	--><li>Menu 3</li><!--
	--><li>Menu 4</li><!--
	--><li>Menu 5</li>
</ul>

css css3

  • Only with CSS not from pq CSS does not detect scroll event, but if you want a response with pure JS or jQuery, with 5 lines of code vc solves.

  • Sure I do! So you mean @media screen and (min-height: doesn’t exist? Gives a version with Pure JS and another Jquery if it’s not too much to ask.

  • Of course @media screen and (min-height: Did you try to use it to solve your problem? I believe you didn’t even try because if you had tried you would have seen that it is not right... About JS or jQuery depends, do you already have jQuery in the project? If you already have it going jQuery, if you don’t have pure JS it’s better pq so you don’t need jQuery matter just for that

  • I don’t have jQuery]

1 answer

1


Only with CSS you can’t because you can’t listen to the scroll event with CSS. The media query you are using does not calculate scroll position, it just checks whether the window height is greater or equal to 10px.

But with pure Javascript you can easily do it using the event onscroll:

document.addEventListener("DOMContentLoaded", function(){
   
   window.onscroll = function(){
      var menu = document.getElementById("menu");
      menu.style.padding = (this.pageYOffset >= 10 ? 20 : 40) + "px 0";
   }
   
});
html, body {
   margin: 0;
   padding: 0;	
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: content-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/		
}

ul#menu {
   position: fixed;
   width: 100vw;
   margin: 0 auto;
   padding: 40px 0;	
   border: .1px solid #000;
}

ul#menu li {
   display: inline-block;
   width: 20%;
   height: 100px;
   line-height: 100px;
   text-align: center;
}
<ul id='menu'>
       <li>Menu 1</li><!--
	--><li>Menu 2</li><!--
	--><li>Menu 3</li><!--
	--><li>Menu 4</li><!--
	--><li>Menu 5</li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Browser other questions tagged css css3

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