Show message on scroll from JQUERY to JAVASCRIPT?

JavaScript
1

I got this code alright but I can’t use it on my other site case jQuery conflicting with other stuff I need to JavaScript.

How can I adapt this code so that it will use JavaSctipt instead of Jquery?

Thanks

<script>
$(document).ready(function(){
    $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
     if(scrollTop > 1){
      $('#PopupSignBut').fadeIn('slow');
     }
        
    })
});
</script>
2

Why not using jQuery in no-conflict mode?

3

What do you mean brother how is that?

4

http://api.jquery.com/jQuery.noConflict/

5

Thanks should I use it like this:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script>
$(document).ready(function(){
    $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
   // now on the basis of scrollTop value show your div
     if(scrollTop > 1){
      $('#PopupSignBut').fadeIn('slow');
     }
        
    })
});
</script>

What jquery jquery.js library should I use? I only need for this code and kind of would like to use small file size?

6

No. Have a look at the example in the linked page.

As usual, that depends … the less older browsers you have to support, the better.

For getting the scroll-top it would probably suffice to have a look at the relevant jQuery source code.

The animation is more complicated (and–again–browser dependent). It’s possible to achieve that using CSS transitions or maybe use a more specialised animation library.

7

Please how should i use no conflict with my code? There are so many examples I ain’t got no idea which to to use.
PLease

8

Pretty much any example will do.

9

OK thanks gonna try bye

10

I would just do it with:

window.addEventListener("scroll", function () {
    if (window.scrollY > 1) {
        document.querySelector("#PopupSignBut").classList.add("fadein");
    }
});

and leave the CSS part of it up to the CSS gurus.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.