Setting menu abruptly

Asked

Viewed 38 times

0

I have a menu that after scroll wins a class. Fixed which makes it cool. It works, but the menu fixed in a very abrupt way and even the scroll of the page is damaged since it fits the new attribute "Fixed" menu.

  1. How do I make the fixing effect softer?

  2. How to prevent the page scroll from being damaged when the menu is fixed?

    <ul class="menu">

    <li class="flex"><a href="">INICIAL</a></li>
    <li class="flex"><a href="">ONDE ESTAMOS</a></li>
    <li class="flex"><a href="">SOBRE NÓS</a></li>
    <li class="flex"><a href="">CONTATO</a></li>

</ul>

CSS

.fixar {
z-index: 9999;
position: fixed;
top: -5%;
left: 50%;
transform: translateX(-50%);
width: 100%;
}

.fixar + .menu {
 padding-top: 102px;
}     
.menu{
background: #fefefe;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
margin: 0 auto;
width: 70%;
padding: 1.2%;
margin-top: 3%;
border-radius: 2%;
-webkit-box-shadow: 0px 13px 35px -9px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 13px 35px -9px rgba(0,0,0,0.75);
box-shadow: 0px 13px 35px -9px rgba(0,0,0,0.75);
 }

JQUERY

<script type="text/javascript">

    var nav = $('.menu');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            nav.addClass("fixar");
        } else {
            nav.removeClass("fixar");
        }
    });

</script>
javascript jquery css

2 answers

1

With the code below you can do the fixed menu when scrolling in a very simple way.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

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

.sticky + .content {
  padding-top: 102px;
}
</style>
</head>
<body>

<div class="top-container">
  <h1>Scroll Down</h1>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

<div class="content">
  <h3>On Scroll Sticky Header</h3>
  <p>The header will stick to the top when you reach its scroll position.</p>
  <p>Scroll back up to remove the sticky effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

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

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

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

</body>
</html>

0


Use a .fadeIn() to smooth the appearance of the menu when it fix. In relation to "harm the scroll", as only by the code shown can not reproduce the actual functioning of the page, it may be that applying a padding-top in the body at the same value the menu occupies in the page flow, resolve. Then you have to test in your code and maybe make some adjustment.

You also need to make a else if so that conditions are not called more than once. In addition to checking whether the scroll is larger than 300, also check if it contains the class .fixar:

var nav = $('.menu');

$(window).scroll(function () {
   // pega a altura do menu (com margens e tudo)
    var nav_height = nav.outerHeight(true);
     if ($(this).scrollTop() > 300 && !nav.hasClass("fixar")) {
        $("body").css("padding-top", nav_height+"px");
         nav
         .hide()
         .addClass("fixar")
         .fadeIn(200);
     } else if($(this).scrollTop() <= 300 && nav.hasClass("fixar")) {
        $("body").css("padding", "0");
         nav
         .removeClass("fixar");
     }
});
.fixar {
z-index: 9999;
position: fixed;
top: -5%;
left: 50%;
transform: translateX(-50%);
width: 100%;
}

.fixar + .menu {
 padding-top: 102px;
}     
.menu{
background: #fefefe;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
margin: 0 auto;
width: 70%;
padding: 1.2%;
margin-top: 3%;
border-radius: 2%;
-webkit-box-shadow: 0px 13px 35px -9px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 13px 35px -9px rgba(0,0,0,0.75);
box-shadow: 0px 13px 35px -9px rgba(0,0,0,0.75);
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">

    <li class="flex"><a href="">INICIAL</a></li>
    <li class="flex"><a href="">ONDE ESTAMOS</a></li>
    <li class="flex"><a href="">SOBRE NÓS</a></li>
    <li class="flex"><a href="">CONTATO</a></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><br><br><br><br><br><br><br><br><br><br><br>

This CSS .fixar + .menu { is invalid because the class .menu is not an adjacent sister of the class .fixar. So it has no effect.

Browser other questions tagged javascript jquery css

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