Плавающий блок на полях сайта

Самый простой вариант разместить на полях сайта блок, это использовать css.

Это будет выглядеть так.

HTML:

<div class="vopros-wrap">
	<a class="vopros-button" href="#">Знак вопроса</a>
	<a class="vopros-text" href="#">Задайте вопрос</a>
</div>

И CSS:

.vopros-wrap{
	position: fixed;
	right: -0px;
	top: 200px;
}

А можно еще вопрос размещения блока на полях сайта решить с помощью jQuery. С добавлением визуального эффекта - смещение блока при прокрутке страницы и возвращения его на прежнее место.

CSS для этого варианта:

body{
	overflow-x:hidden;
}
.vopros-wrap{
	position:absolute;
	right: -200px;
	top: 200px;
}
.vopros-wrap:hover{
	right: 0px;
	transition:0.25s linear all;
	-webkit-transition:0.25s linear all;
	-moz-transition:0.25s linear all;
	-o-transition:0.25s linear all;
}  
.vopros-wrap:hover .vopros-text{
	visibility:hidden;
}
.vopros-button{
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	background:#ccc;
	left:-50px;
	top:0;
	box-sizing:border-box;
}
.vopros-text{
	display:block;
	width:200px;
	height:auto;
	background:#0000ff;
	min-height:50px;
	box-sizing:border-box;
	visibility:hidden;
}

Javascript:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(window).scroll(function(){
		var bo = jQuery(this).scrollTop();
 
		if ( bo >= 10) {
			var top = bo + 200 + 'px';
			jQuery(".vopros-wrap").stop().css('display', 'block').animate({'top':top},500);
		}
 
	});
});
</script>

Чтобы сделать комментарий, нужно авторизоваться на сайте!