Հայոց English

Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll
  1. Главная

как закрепить хедер с меню сверху

как закрепить хедер с меню сверху
, by

Всем добрый день/ночь/вечер)))

Помогите) Как закрепить хедер с меню сверху так чтоб, при прокрутки страницы он всегда был виден?

Drupal version 7.x
1 answer
votes: 1120
Answer

Здравствуйте, используйте position: fixed;

Или вот это через jquery:

1. CSS

.left {
	width: 70%;
	float: left;
	height: 1500px;
}
.right {
	margin-top: 10px;
	float: right;
	width: 20%;
}
#fixed {
	background: #CCC;
	padding: 20px;
}


2. Подключение jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


Данный код добавляем в раздел <head>
3. JavaScript

<script type="text/javascript">
	$(function() {
		var offset = $("#fixed").offset();
		var topPadding = 15;
		$(window).scroll(function() {
			if ($(window).scrollTop() > offset.top) {
				$("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
			}
			else {$("#fixed").stop().animate({marginTop: 0});};});
	});
</script>

Данный код, также, добавляем в раздел <head>, но после кода подключения jQuery.

4. HTML

<div class="left">
	<!-- Содержание -->
</div>
<div class="right">
	<div id="fixed">Текст фиксированного блока.</div>
</div>