JSFiddle - React, Tailwind, and code Playground

by SANDEEP VIRANI

HTML

<div id="scrollText">0</div>
<div id="main">
    <span>ALERT ENABLE / DISABLE :</span><input type="checkbox" id="chkbox"/><br/>
    <input type="button" id="btnAlert" value="Check for Alert Working"/>
</div>
<pre>ALERT is not working because &lt;script id="scriptAlert"&gt; is <br/> wrapping by &lt;noscript&gt; tag...<pre/>
<script id="scriptAlert">
    function alerting(){
        alert("Alert Demo");
    }
</script>

CSS

body{
    height:3000px;
    background:url(http://wallpapergrab.com/wp-content/uploads/2014/03/colorful-backgrounds-wallpapers-image.jpg) repeat 0 0 scroll transparent;
}
#main {
    position:fixed;
}
#main span{
    color:#fff;
}
pre{
    display:none;
    position:fixed;
    top:50px;
    color:#fff;
}
#scrollText {
    font-size:34px;
    position : fixed;
    height:40px;
    left:250px;
    top:200px;
    color:#fff;
}

JavaScript

$(window).scroll(function() {
    var scrollHeight = $(this).scrollTop();
    if(scrollHeight>=400)
    {
        $("body").css("background-attachment","fixed");
    }
    
    $("#scrollText").html(scrollHeight);
});
$("#btnAlert").click(function(){
    
    if($("#chkbox").is(":checked")){
        $("#scriptAlert").wrap("<noscript></noscript>");
        $("pre").show();
    }else{
        alerting();
    }
});