Soon accompanying page scroll(problem)

Asked

Viewed 140 times

0

I made a jquery to add a Fixed on the page logo depending on the amount of scrolling, but it is very done, when it passes the amount of scroll that the logo gets Fixed the logo 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 the roll but the "hop" is inevitable

jquery css

  • Because you don’t let it Fixed at once?

  • Yes I did it @andrepaulo but then he ate the image below

  • on the bottom image Voce has to breathe, ex. margin-top: 100px;

  • #mobileFachada{ margin-top: 158px;}

  • 1

    I managed to solve a lot Thanks to all I did almost the same andrepaulo spoke I left from the start Fixed soon and added a margin-top of 2%

  • answers the question, with the code used and accepts the answer.

Show 1 more comment

2 answers

0


Here is an example of a fixed header at the top that accompanies the scroll, as the friend andrepaulo commented, there are several ways both with jquery and css to make an "animation" to fix the header at the top when for example the .scrollTop() > 100, if you want to use, 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>
<div id="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>

  • Friend, taking advantage... this fixed logo when used in the browser Ucbrowser mobile phone it hides the whole screen, you know why? In cellular Chrome will normal but in it will not

  • @Andersonhenrique Exactly why I am occupying the entire screen I don’t know, but I assume it is some incompatibility with some attribute of css, here is a discussion on the subject http://stackoverflow.com/questions/30851085/css-responsive-design-in-mobile-is-not-Working-on-uc-browser-and-opera-mini

0

Well what I basically did, I removed the jquery and put Fixed first, then just added a margin-top in the image below.

#titulo {
width:100%;
position: fixed;
z-index: 99;
}

#mobileFachada{
margin-top: 2%;
 }

Browser other questions tagged jquery css

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