HTML & Javascript Code in Custom HTML Widget Can't Perform Well

I have added floating box widget on my footer widget but the floating box widget can't showing well on my single post. I have tried to add this code to my another blog that not use GP Premium theme and this code showing well. This is my code.

<style type='text/css'>
#box-message {
position:fixed !important;
position: -webkit-sticky; /* Safari */
position: sticky;
display:none;
top:350px;
left:28%;
margin:0px 0px 0px 0px;
width:40%;
height:auto;
padding:12px;
background: rgb(56,191,195);
background: -moz-linear-gradient(to bottom right 90deg, rgba(56,191,195,1) 0%, rgba(74,198,202,1) 0%, rgba(110,210,213,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(56,191,195,1) 0%, rgba(74,198,202,1) 0%, rgba(110,210,213,1) 100%);
background: linear-gradient(90deg, rgba(56,191,195,1) 0%, rgba(74,198,202,1) 0%, rgba(110,210,213,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#38bfc3",endColorstr="#6ed2d5",GradientType=1);
font-family: "Segoe UI", sans-serif;
text-align:center;
font-size:20px;
font-weight:300;
color:#fff;
border: 4px solid #aecad7;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:17px;
}

#box-message a.close {
position:absolute;
text-decoration:none;
color:white;
background-color: #4c4c4c;
border: 2px solid #aecad7;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: Georgia, Serif;
top: -19px;
right: -21px;
left: -21px;
font-size: 11px;
line-height: 12px;
width: 13px;
height: 13px;
text-align: center;
font-weight:bold;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
jQuery.noConflict(true);

jQuery(document).ready(function($){
var isScroll = false;
$(window).bind("load", function() { 
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {

$(this).parent().fadeOut();
return false;
});
});
$(window).bind("scroll", function() {
		var scrollPosition = $(this).scrollTop(); 
		if(scrollPosition >= 50 && !isScroll){
			// Animate Top Value When Page Loaded Completed
			isScroll = true
$('#box-message').fadeIn('fast');
 $('#box-message').animate({top:"350px"}, 0);
		}
	});
});
</script>

<div id='box-message'>
<span>Selamat Datang</span><br/>
<span>&</span><br/>
<span style='margin-top:10px; font-weight:bold;'>Selamat Belajar</span>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>