Perform Javascript function when reloading the page

Asked

Viewed 170 times

-1

I have 2 buttons I put on the menu, and when the scroll appears 1 and add the other because the menu changes color (I’m sending the images for better view).

So far so good. You’re doing it the way I want. However, when reloading the page, it shows the two buttons and the reveal and hide function only work when the scroll. I wanted to run it right away when reload the page and the black button only appeared when scrolling the page.

My code:

$(window).scroll(function(){

    if($(document).scrollTop() > 50 ){// se a rolagem passar de 200px esconde o elemento

        $('.maxbutton-6.maxbutton.maxbutton-botao3.fancybox.iframe').fadeIn(0); // Esconde usando fadeOut

    } else { // senão ele volta a ser visivel

        $('.maxbutton-6.maxbutton.maxbutton-botao3.fancybox.iframe').fadeOut(0); // Mostra usando fadeIn

    }

});

$(window).scroll(function(){
         if($(document).scrollTop() > 50){// se a rolagem passar de 200px esconde o elemento

        $('.maxbutton-5.maxbutton.maxbutton-area3.fancybox.iframe').fadeOut(0); // Esconde usando fadeOut

    } else { // senão ele volta a ser visivel

        $('.maxbutton-5.maxbutton.maxbutton-area3.fancybox.iframe').fadeIn(); // Mostra usando fadeIn

    }


});
javascript rolling

2 answers

3

You just call one .trigger("scroll") in the same object window that creates the scroll event:

$(window).scroll(function(){

   if($(document).scrollTop() > 50 ){// se a rolagem passar de 200px esconde o elemento

      $('.maxbutton-6.maxbutton.maxbutton-botao3.fancybox.iframe').fadeIn(0); // Esconde usando fadeOut
      $('.maxbutton-5.maxbutton.maxbutton-area3.fancybox.iframe').fadeOut(0);

   } else { // senão ele volta a ser visivel

      $('.maxbutton-6.maxbutton.maxbutton-botao3.fancybox.iframe').fadeOut(0); // Mostra usando fadeIn
      $('.maxbutton-5.maxbutton.maxbutton-area3.fancybox.iframe').fadeIn();

   }

}).trigger("scroll"); // AQUI DISPARA O EVENTO SCROLL

Now, you don’t have to (or should) repeat Event Handler for every thing, just put it all in one.

Another thing is to put the value 0 in the Fades. This makes no sense because it will undo the effect. It would be like using .show() and .hide(). If want that fade effect, remove the value or put a value other than 0 (the default value is 400).

Working example:

$(window).scroll(function(){

   if($(document).scrollTop() > 50 ){// se a rolagem passar de 200px esconde o elemento
   
      $('.maxbutton-6.maxbutton.maxbutton-botao3.fancybox.iframe').fadeIn(); // Esconde usando fadeOut
      $('.maxbutton-5.maxbutton.maxbutton-area3.fancybox.iframe').fadeOut();

   } else { // senão ele volta a ser visivel
   
      $('.maxbutton-6.maxbutton.maxbutton-botao3.fancybox.iframe').fadeOut(); // Mostra usando fadeIn
      $('.maxbutton-5.maxbutton.maxbutton-area3.fancybox.iframe').fadeIn();
   
   }

}).trigger("scroll");
body, html{
   height: 1500px;
}

div{
   position: fixed;
   top: 10px;
   left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
   <button class="maxbutton-6 maxbutton maxbutton-botao3 fancybox iframe">Botão > 50px</button>
   <button class="maxbutton-5 maxbutton maxbutton-area3 fancybox iframe">Botão < 50px</button>
</div>

  • It’s not working out, buddy! I put Rigger at the end but it went on the same way. the function is only running when lowering the scroll, but at the time of pressing appears the two buttons.

  • I’ll take a look....

  • in your example it worked, but in mine something is going wrong.

  • Do it like this: .trigger("scroll");.... add code: $(document).ready(function(){ $(window).trigger("scroll"); });

  • Friend I can do this another way. I left the black button opaque in the css settings. and sent a code to appear only when scrolling and worked the way I wanted, now when loading the page it executes the css and when scrolling the scrooll it execrates the java. I thank you for your attention to my problem, thank you !

0

ao carregar a pagina

ao rolar scrool

ao voltar scrool

I wanted that when loading the page the black button was already opaque and only appeared when rolling the scrool, but when loading the page it already appears and keeps showing the two buttons

Browser other questions tagged javascript rolling

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