Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="rows">
  <div class="left-col">
    <p>Таким образом сложившаяся структура организации в значительной степени обуславливает создание соответствующий условий активизации. С другой стороны сложившаяся структура организации обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что консультация с широким активом представляет собой интересный эксперимент проверки соответствующий условий активизации.

      Задача организации, в особенности же постоянный количественный рост и сфера нашей активности требуют определения и уточнения модели развития. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации систем массового участия. С другой стороны сложившаяся структура организации позволяет оценить значение систем массового участия.

      Повседневная практика показывает, что укрепление и развитие структуры влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям. Таким образом начало повседневной работы по формированию позиции позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач.

      Равным образом постоянный количественный рост и сфера нашей активности способствует подготовки и реализации направлений прогрессивного развития. Таким образом реализация намеченных плановых заданий в значительной степени обуславливает создание дальнейших направлений развития. Товарищи! дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.

      С другой стороны новая модель организационной деятельности играет важную роль в формировании форм развития. Не следует, однако забывать, что реализация намеченных плановых заданий влечет за собой процесс внедрения и модернизации существенных финансовых и административных условий. Таким образом новая модель организационной деятельности позволяет оценить значение соответствующий условий активизации. С другой стороны начало повседневной работы по формированию позиции требуют от нас анализа моделиразвития.

      Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют от нас анализа систем массового участия. Товарищи! реализация намеченных плановых заданий влечет за собой процесс внедрения и модернизации новых предложений.</p>
  </div>
  <div class="right-col">
    <p>Правая колонка</p>
    <p>Правая колонка</p>
    <p>Правая колонка</p>
    <p>Правая колонка</p>
    <div class="fixed-box">
      <div class="fixed-div">
        Код меню или баннера...
      </div>
    </div>
  </div>
</div>
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus voluptatum eaque modi dolorem minima ipsa placeat id tenetur non! Maxime quos dicta sit! Ad vel quo non aperiam quod doloribus corporis? Eaque autem minima iure earum reprehenderit, exercitationem facilis voluptatem porro eum deserunt at repellendus maxime fugit alias vero vel veritatis sunt perferendis suscipit necessitatibus ipsa? Blanditiis nihil provident veniam, perspiciatis repellat eaque vel odio enim temporibus cumque! Reiciendis maiores aut ad quidem odit cumque corrupti, quas sapiente tempora modi. Ex, sequi natus! Sunt ex quas, modi labore accusamus repellat reprehenderit. Voluptatum quam ducimus nulla consectetur, minus ad facere consequatur accusantium iure similique harum enim tenetur eius sunt suscipit. Praesentium sit sed rerum accusamus nemo quos esse, omnis vitae asperiores nam perferendis ut nihil aperiam at. Aliquid maiores amet impedit optio delectus est hic, accusamus aspernatur fugiat asperiores cupiditate aperiam ea saepe minus voluptas eum ipsum quam earum similique id? Corporis pariatur rerum exercitationem qui, placeat omnis eos maiores, necessitatibus quis totam repudiandae nihil fugiat nisi nulla enim expedita. Architecto soluta itaque quaerat totam doloribus ipsa amet sunt molestiae voluptatibus voluptas, vel et magni, ad delectus. Accusamus consequatur quam reiciendis, sunt fuga rerum magnam obcaecati error natus laboriosam, sint aliquid deserunt rem assumenda harum totam? Velit natus officia quaerat molestias, magni eos quos delectus! Et fugiat doloribus officia recusandae, perferendis cum accusantium vero error minus sequi numquam fuga eius aut? Voluptas repellat expedita sequi nostrum optio perspiciatis, recusandae ab aliquam doloribus earum esse beatae impedit est, praesentium fuga ratione delectus in quasi? Rem ipsam incidunt quis ducimus totam maiores eum dolores modi ullam hic distinctio illum quasi optio iste veniam accusantium, molestias obcaecati voluptate! Iusto error explicabo eum cum unde aperiam nulla quae dolores officia illum. Tempora voluptatem minima obcaecati enim, minus nesciunt deleniti quasi, praesentium alias sapiente atque aspernatur amet debitis quae quidem error natus impedit similique commodi repudiandae totam, ad doloribus placeat beatae! Molestiae consequatur possimus facilis? Assumenda rerum ut ipsam est in obcaecati cum eligendi, atque cupiditate consectetur labore quia, provident, ratione sunt. Officia hic rem alias delectus dicta iure mollitia, reiciendis aspernatur! Consectetur veritatis temporibus pariatur aliquid placeat, nam ducimus debitis totam. Omnis nemo soluta facilis non nam velit, harum obcaecati magni id expedita fugit nostrum quo impedit magnam neque similique? Dolores reprehenderit nemo, quod ea, porro qui illum, non minima officiis veniam fuga inventore ut facere totam cupiditate necessitatibus! Quis hic, sit suscipit similique temporibus obcaecati maxime dignissimos debitis, voluptatem facilis, mollitia autem saepe quidem soluta nihil sint. Labore, eum officia nemo iste incidunt, unde deserunt quia quos, voluptate soluta repellendus deleniti. Tempora amet incidunt saepe perspiciatis debitis, inventore illo minima quisquam voluptatum, qui quaerat. Non exercitationem labore aut rem, distinctio sapiente, quas totam, tempore maxime maiores suscipit voluptas impedit nesciunt! Illum possimus, voluptatum suscipit iste laudantium modi. Laudantium iusto soluta, perspiciatis quidem ut autem iure ullam, recusandae obcaecati commodi ducimus dolor quod expedita tempora? Ipsam placeat voluptatem consectetur sapiente, totam numquam vero ad, repellendus id, facere iste soluta! Delectus obcaecati odio amet, tempore, dolores facilis sint deleniti debitis repellendus exercitationem eos. Dolor iste esse quia repudiandae voluptatibus, odio reiciendis non deserunt ex? Eius architecto, non eos numquam cumque magni excepturi cum harum a velit tenetur iusto omnis vel dolores quae est mollitia ipsa sint illum nostrum quis. Inventore sapiente impedit nulla corporis voluptate omnis sequi eius, eum quisquam mollitia quod ullam animi velit esse minima quasi, at deserunt, sint officia. Minus quam corporis exercitationem asperiores repudiandae nihil quidem voluptatibus incidunt voluptatum sint. Ut modi quod sapiente quasi molestiae repudiandae quos libero dolor ex expedita blanditiis, consectetur error eveniet soluta assumenda dolorem saepe tenetur explicabo fugiat architecto. Repellendus quam nam quos et assumenda id asperiores distinctio alias porro ex magnam perferendis nemo quasi, cum sapiente dolor veritatis nostrum in similique ipsa. Distinctio, placeat. Officia, obcaecati eius? Quam sunt accusamus corrupti, consequatur cum pariatur praesentium nihil tempore quae dolore culpa! Quibusdam ipsum suscipit autem accusamus eos officiis reiciendis! Alias nam ea voluptatibus mollitia sapiente eum, asperiores assumenda. Ducimus quasi eligendi rem! Fuga expedita alias, libero tempora provident blanditiis delectus ratione molestias saepe laborum atque et, dicta quaerat autem incidunt recusandae necessitatibus sed vitae suscipit labore repellat! Aut, nisi consequatur ipsa eos, voluptas corporis optio, hic accusantium quam suscipit cumque. Quam, dolor minima velit maxime expedita quibusdam id, excepturi, voluptates nobis at amet quos molestiae ipsum beatae iste voluptate? Suscipit magni est enim sint, perspiciatis, odit accusamus ipsam assumenda voluptate quod necessitatibus eius blanditiis quasi iste, sapiente quam possimus id nam voluptates ex. Quas vitae ipsum quae officiis nihil porro minima reprehenderit sed quidem dolor vel consectetur provident placeat, pariatur id? Ex perferendis blanditiis pariatur rem odio, molestiae a eaque non. Minima iusto odio, sit repellendus facilis nihil reprehenderit nemo omnis ea molestias architecto corrupti quam rerum temporibus quisquam laborum, culpa quaerat impedit quod voluptate quae consequuntur eligendi voluptas sint? Eligendi praesentium porro ipsa doloremque quas odit doloribus fugit, natus perferendis quod aliquid tenetur accusantium sequi id maiores possimus optio, deleniti perspiciatis earum eos, omnis expedita esse magni repellendus! Aperiam veritatis quas reiciendis doloribus eius corporis qui iure totam, amet expedita repellendus a repellat. Inventore rem quod praesentium velit repellendus ducimus nihil veritatis consequuntur dolor ullam explicabo fugiat quidem excepturi, modi perspiciatis animi perferendis eius necessitatibus doloremque commodi soluta cum molestias? Veritatis, consequuntur voluptates voluptate animi ex, reiciendis aut nihil expedita repellendus aperiam voluptatum voluptatibus amet neque non? Placeat soluta necessitatibus vero consectetur quos, dolorem sunt, modi ab, delectus nesciunt excepturi magni odit velit? Adipisci quibusdam ad tenetur vero aperiam repellat qui, quo illo blanditiis deserunt officiis molestias fugit numquam maxime amet facilis exercitationem unde! Dolore animi eos temporibus atque. Minima expedita nesciunt dolores, possimus adipisci, eum fugit ipsa amet consequuntur voluptatibus quos consectetur laborum illum? Magni a, eaque neque sed sapiente odit repellat amet porro quaerat quam aperiam eligendi numquam cumque doloremque velit facere sint nobis quae harum nisi labore. At, distinctio, excepturi rem vitae atque voluptates non quibusdam sequi, enim culpa quis eius aspernatur optio doloremque voluptate laborum quae obcaecati quaerat? Similique corporis iste explicabo.</p>
</div>

              
            
!

CSS

              
                .rows {
	overflow: hidden;
}
.left-col {
	width: 60%;
	float: left;
	text-align: justify;
}
.right-col {
	margin-left: 65%;
}
.fixed-box {
	height: 200px;
}
.fixed-div {
	height: 180px;
	text-align: center;
	background: #FFA500;
	padding: 10px 0;	
}
.fixed {
	position: fixed;
	z-index: 9999;
	top: 0;
}
              
            
!

JS

              
                $(function(){
	$nav = $('.fixed-div');
	$nav.css('width', $nav.outerWidth());
	$window = $(window);
	$h = $nav.offset().top;
	$window.scroll(function(){
		if ($window.scrollTop() > $h) {
			$nav.addClass('fixed');
		} else {
			$nav.removeClass('fixed');
		}
	});
});
              
            
!
999px

Console