<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Executing a Function on Scroll Event in jQuery</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> p{ width: 100%; padding: 50px 0; text-align: center; font: bold 35px sans-serif; background: purple; position: fixed; top: 52px; display: none; } .dummy-content{ height: 500px; font: 34px sans-serif; text-align: center; } </style> <script> $(document).ready(function(){ $(window).scroll(function() { $("p").show().fadeOut("slow"); }); }); </script> </head> <body> <p>Scroll!</p> <div class="dummy-content">Happy Morning</div> <div class="dummy-content">Happy Morning.</div> <div class="dummy-content">Happy Morning.</div> <div class="dummy-content">Happy Morning.</div> <div class="dummy-content">Happy Morning.</div> </body> </html>