JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<div class="page"><h2><center>صفحه را اسکرول نمایید.</center></h2></div>
<div id="random-post-inner">
	<div id="random-post">
	<h3><a href="#"  rel="bookmark" >عنوان </a></h3>
	<p>چکیده متن مطلب پیشنهادی چکیده متن مطلب پیشنهادی چکیده متن مطلب پیشنهادی چکیده متن مطلب پیشنهادی چکیده متن مطلب پیشنهادی 	</p>
	</div>
	<div id="random-post-close-button">&times;</div>
</div>

CSS

body {
	direction:rtl;
}
.page {
	height:3000px
}
h3 {
    padding:0;
}
h3 a {
    color:#369;
    text-decoration:none;
}
/*کدهای مربوط به باکس*/
#random-post-inner {
	position:fixed;
	width:240px;
	height:auto;
	min-height:150px;
	padding:15px;
	background-color:aliceblue;
	border:1px #aaa solid;
	right:10px;
	bottom:10px;
	display:none;
	box-shadow:-1px -2px 6px rgba(0, 0, 0, .3);
}
#random-post-close-button {
	position:absolute;
	font-size:24px;
	left:0px;
	top:0;
	cursor:pointer;
	color:#999;
}
#random-post-close-button:hover {
    color:#b55;
}

JavaScript

$(window).scroll(function() {
var s = $(this).scrollTop();
if(!$("#random-post-inner").hasClass("closed") && s>200) {
$("#random-post-inner").fadeIn(1200);
}
else {
$("#random-post-inner").fadeOut('normal');
}
});
$("#random-post-close-button").click(function() {
$(this).parent("#random-post-inner").addClass("closed").fadeOut("normal")
})