[WordPress] 2 つの列のいずれかの固定

スポンサーリンク

質問

私はワードプレスのサイトがある、ブートス トラップ 3 フレームワークを利用しています。私はそれを持っている設定をして、左側の狭い列、大きな列が、右側 (すべての記事を含む。右側の列にスクロールしながら場所に固執する左の列をクリックします

 
$(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 the 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>

それは棒が、列の幅を保持しません。流れからコンテンツを受け取り、レイアウトを遺跡

視覚ページ レイアウトを編集する-

enter image description here

答え

ここ可能な解決策の一つです。
Body_wrap を入れてすべてサイドバー ・ メインの 1 つの側面の 1 つの側面を置くよりも。サイドバーをスクロールし、メインが固定します

#body_wrap{
display: flex;
overflow: hidden;
height: 100vh;
margin-top: -100px;
padding-top: 100px;
position: relative;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}

#main, #sidebar {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}

答え

この必要がある推測:

 
$(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 a {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>
<h1>Microsoft Windows</h1>
<p>Microsoft Windows (or simply Windows) is a metafamily of graphical operating systems developed, marketed, and sold by Microsoft. It consists of several families of operating systems, each of which cater to a certain sector of the computing industry. Active Windows families include Windows NT, Windows Embedded and Windows Phone; these may encompass subfamilies, e.g. Windows Embedded Compact (Windows CE) or Windows Server. Defunct Windows families include Windows 9x and Windows Mobile.</p>
<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 an operating environment named Windows on November 20, 1985, as a graphical operating system shell for MS-DOS in response to the growing interest in graphical user interfaces (GUIs). Microsoft Windows came to dominate the world's personal computer market with over 90% market share, overtaking Mac OS, which had been introduced in 1984. However, since 2012, it sells less than Android, which became the most popular operating system in 2014, when counting all of the computing platforms Windows runs on (same as Android); in 2014, the number of Windows devices sold were less than 25% of Android devices sold.</p>
  <p>As of July 2015, the most recent version of Windows for personal computers, tablets and smartphones is Windows 10. The most recent versions for server computers and embedded devices are respectively Windows Server 2012 R2 and Windows Embedded 8. A specialized version of Windows runs on the Xbox One game console.</p>
  <p>The next server version of Windows is Windows Server 2016, which is expected to be released in early 2016.</p>
  <p>The history of Windows dates back to September 1981, when Chase Bishop, a computer scientist, designed the first model of an electronic device and project Interface Manager was started. It was announced in November 1983 (after the Apple Lisa, but before the Macintosh) under the name "Windows", but Windows 1.0 was not released until November 1985. Windows 1.0 was to compete with Apple's operating system, but achieved little popularity. Windows 1.0 is not a complete operating system; rather, it extends MS-DOS. The shell of Windows 1.0 is a program known as the MS-DOS Executive. Components included Calculator, Calendar, Cardfile, Clipboard viewer, Clock, Control Panel, Notepad, Paint, Reversi, Terminal and Write. Windows 1.0 does not allow overlapping windows. Instead all windows are tiled. Only modal dialog boxes may appear over other windows.</p>
  <p>Windows 2.0 was released in December 1987, and was more popular than its predecessor. It features several improvements to the user interface and memory management. Windows 2.03 changed the OS from tiled windows to overlapping windows. The result of this change led to Apple Computer filing a suit against Microsoft alleging infringement on Apple's copyrights. Windows 2.0 also introduced more sophisticated keyboard shortcuts and could make use of expanded memory.</p>
  <p>Windows 2.1 was released in two different versions: Windows/286 and Windows/386. Windows/386 uses the virtual 8086 mode of Intel 80386 to multitask several DOS programs and the paged memory model to emulate expanded memory using available extended memory. Windows/286, in spite of its name, runs on both Intel 8086 and Intel 80286 processors. It runs in real mode but can make use of the high memory area.</p>
  <p>In addition to full Windows-packages, there were runtime-only versions that shipped with early Windows software from third parties and made it possible to run their Windows software on MS-DOS and without the full Windows feature set.</p>
  <p>The early versions of Windows are often thought of as graphical shells, mostly because they ran on top of MS-DOS and use it for file system services. However, even the earliest Windows versions already assumed many typical operating system functions; notably, having their own executable file format and providing their own device drivers (timer, graphics, printer, mouse, keyboard and sound). Unlike MS-DOS, Windows allowed users to execute multiple graphical applications at the same time, through cooperative multitasking. Windows implemented an elaborate, segment-based, software virtual memory scheme, which allows it to run applications larger than available memory: code segments and resources are swapped in and thrown away when memory became scarce; data segments moved in memory when a given application had relinquished processor control.</p>
</section>

http://stackoverflow.com/questions/32197385/two-columns-with-one-fixed

スポンサーリンク

Leave a Reply