Logo accompanying page scroll (problem)

Navigation
0

I made a jquery to add a fixed in the page logo depending on the amount of scroll scrolling, however it is very done, when it passes the amount of scroll that the logo is fixed the logo of a "jump" to the middle of the page ... Well the page is politicadascidades.com.br watch the logo when you scroll the page a certain amount.

Well my jquery code is like this 

        $(function(){   
        var nav = $('#titulo');   
        $(window).scroll(function () { 
            if ($(this).scrollTop() > 100   ) { 
                nav.addClass("titulo-fixo"); 
            } else { 
                nav.removeClass("titulo-fixo"); 
            } 
        });  
    });

and the css it will add is 

   .titulo-fixo{

   position:fixed;
   top:0;
   z-index:99;

  }

I have tried to decrease or increase scrolling, but the "jump" is inevitable

    
asked by anonymous 24.03.2017 / 13:38

2 answers

0

Here is an example of a fixed header at the top that accompanies scroll , as friend andrepaulo commented, there are several ways both with jquery and css to do an "animation" to set the header at the top when for example .scrollTop() > 100 , if you want to use it, take a look at jQuery animate / CSS transitions 

$(function() {
  var nav = $('#titulo');
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      //nav.addClass("titulo-fixo");
    } else {
      //nav.removeClass("titulo-fixo");
    }
    
  });
});
#titulo {
  border: 2px solid red;
  width: 100%;
  height: 50px;
  background-color:black;
  color:white;
  position:fixed;
  opacity:0.5;
  top:0;
  z-index:99;
}

body{
height:2000px;
}

.conteudo{
margin-top:60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><divid="titulo">
  Cabeçalho
</div>
<div class="conteudo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla eros ac dignissim auctor. In elit massa, congue vitae ipsum sit amet, ultrices eleifend erat. Nunc sit amet elementum enim, et vehicula magna. Nulla facilisi. Etiam fermentum magna in faucibus rutrum. Cras condimentum bibendum tortor id convallis. Donec a sapien vitae ligula porta euismod. Nulla sed risus sed augue lobortis vehicula vitae sit amet risus.

Aliquam elit mi, imperdiet at commodo quis, cursus et massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc fringilla pretium magna scelerisque facilisis. Etiam vehicula lectus a varius tincidunt. Curabitur sagittis nibh erat, id finibus neque aliquam ac. Curabitur ornare diam vel pellentesque facilisis. Suspendisse odio diam, consectetur ac maximus finibus, eleifend id nibh. Sed at ante quis turpis dapibus iaculis nec vitae nisl. Vivamus dictum metus in aliquam tincidunt. Praesent et arcu semper, venenatis nisi sit amet, suscipit arcu.

Suspendisse nibh mauris, mollis vitae ornare eget, tristique eu ligula. Vivamus porttitor malesuada lacus. Sed elit libero, bibendum nec aliquam vitae, ullamcorper sit amet justo. Donec egestas sem et efficitur tempus. Praesent luctus odio eu fermentum euismod. Morbi dictum et justo nec bibendum. Integer aliquam lacinia erat, eu consequat nulla pellentesque quis. Cras auctor, elit quis finibus consectetur, neque elit elementum nunc, eget consequat urna leo sit amet est. Nulla lobortis porta erat vestibulum iaculis.

Phasellus mollis congue dolor sed ultrices. Cras euismod orci tempus lacinia sodales. Nunc id nisl scelerisque, sagittis libero sit amet, porta eros. Quisque dapibus magna purus, id hendrerit risus ornare in. Vivamus aliquet justo vel sapien tincidunt dapibus. Curabitur posuere, mi eu pulvinar sollicitudin, nisl lectus porta est, cursus consectetur urna elit vitae sapien. Aliquam tellus dolor, tincidunt id tortor at, rutrum suscipit nulla.
</div>


</body>
    
24.03.2017 / 14:32
0

24.03.2017 / 14:41
Jquery showing listing Difficulties with Logic