Bycrome Bycrome - 4 months ago 7
Javascript Question

remove and add margin based on amount scrolled

Css

.menu {
margin-top: 100px;
width: 100%;
height: 25px;
position: fixed;
}


I am trying to make it, when the user scrolls down 100px from the top of the document, the
margin-top
of element
.menu
is removed.

Answer

well. when asking this kind of questions you should include the solution that you have tried. not just ASK for us to make you a code. but...i am feeling charitable today so here is the solution :

$(window).scroll(function(){
   if($(window).scrollTop()>100){
   
   $(".menu").css({"margin-top":"0"})
   }else{
   $(".menu").css({"margin-top":"100px"})
   }
});
.menu {
margin-top: 100px;
width: 100%;
height: 25px;
position: fixed;
background:red;
transition:0.5s;
}
body {
  height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
</div>