javascript - two columns - with one fixed -
i have wordpress site utilizes bootstrap 3 framework. have set have a narrow column on left, larger column on right (that has posts. want left column stick in place while right column scrolls.
$(document).ready(function() { var s = $("#nav"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrolltop(); if (windowpos >= pos.top) { s.addclass("stick"); } else { s.removeclass("stick"); } }); });
.stick { position: fixed; top: 0; z-index: 100; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="indx-wrap" class="row"> <div class="col-md-3"> <div id="nav"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. proin vitae sodales nunc, eu aliquet ex.</p> </div> </div> <div class="col-md-9"> <?php if ( have_posts() ) : ?> <?php /* start loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'article'); ?> <?php endwhile; ?> <div class="clearfix"></div> <?php else : ?> <?php get_template_part( 'no-results', 'index' ); ?> <?php endif; ?> </div> </div>
it sticks doesn't keep column width. takes content out of flow , ruins layout
edit - visual representation page layout
guess need this:
$(function () { $(window).scroll(function () { if ($("section").position().top < $(window).scrolltop()) $("section").addclass("sticky"); else $("section").removeclass("sticky"); }); });
* {font-family: 'segoe ui'; margin: 0; padding: 0; list-style: none; text-decoration: none;} h1 {font-size: 1.2em;} h1, p, ul {margin: 0 0 10px;} section {position: relative; padding-left: 115px;} section aside {position: absolute; width: 100px; left: 5px; border: 1px solid #999; top: 5px;} section aside nav {padding: 5px;} section aside nav {display: block; padding: 3px;} section aside nav a:hover {background-color: #ccf;} section.sticky aside {position: fixed;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> <section> <aside> <nav> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> </ul> </nav> </aside> <p>microsoft introduced operating environment named windows on november 20, 1985, graphical operating system shell ms-dos in response growing interest in graphical user interfaces (guis). microsoft windows came dominate world's personal computer market on 90% market share, overtaking mac os, had been introduced in 1984. however, since 2012, sells less android, became popular operating system in 2014, when counting of computing platforms windows runs on (same android); in 2014, number of windows devices sold less 25% of android devices sold.</p> <p>as of july 2015, recent version of windows personal computers, tablets , smartphones windows 10. recent versions server computers , embedded devices respectively windows server 2012 r2 , windows embedded 8. specialized version of windows runs on xbox 1 game console.</p> <p>the next server version of windows windows server 2016, expected released in 2016.</p> <p>the history of windows dates september 1981, when chase bishop, computer scientist, designed first model of electronic device , project interface manager started. announced in november 1983 (after apple lisa, before macintosh) under name "windows", windows 1.0 not released until november 1985. windows 1.0 compete apple's operating system, achieved little popularity. windows 1.0 not complete operating system; rather, extends ms-dos. shell of windows 1.0 program known ms-dos executive. components included calculator, calendar, cardfile, clipboard viewer, clock, control panel, notepad, paint, reversi, terminal , write. windows 1.0 not allow overlapping windows. instead windows tiled. modal dialog boxes may appear on other windows.</p> <p>windows 2.0 released in december 1987, , more popular predecessor. features several improvements user interface , memory management. windows 2.03 changed os tiled windows overlapping windows. result of change led apple computer filing suit against microsoft alleging infringement on apple's copyrights. windows 2.0 introduced more sophisticated keyboard shortcuts , make use of expanded memory.</p> <p>windows 2.1 released in 2 different versions: windows/286 , windows/386. windows/386 uses virtual 8086 mode of intel 80386 multitask several dos programs , paged memory model emulate expanded memory using available extended memory. windows/286, in spite of name, runs on both intel 8086 , intel 80286 processors. runs in real mode can make use of high memory area.</p> <p>in addition full windows-packages, there runtime-only versions shipped windows software third parties , made possible run windows software on ms-dos , without full windows feature set.</p> <p>the versions of windows thought of graphical shells, because ran on top of ms-dos , use file system services. however, earliest windows versions assumed many typical operating system functions; notably, having own executable file format , providing own device drivers (timer, graphics, printer, mouse, keyboard , sound). unlike ms-dos, windows allowed users execute multiple graphical applications @ same time, through cooperative multitasking. windows implemented elaborate, segment-based, software virtual memory scheme, allows run applications larger available memory: code segments , resources swapped in , thrown away when memory became scarce; data segments moved in memory when given application had relinquished processor control.</p> </section>
Comments
Post a Comment