Flexbox设计中的粘性侧边栏

Question

Flexbox设计中的粘性侧边栏

如何使用flexbox制作的圣杯布局的侧边栏变粘？即.当最后一个元素到达时,html的旁边和导航部分应该停止向下滚动.我试过多种方法但收效甚微.

HTML:

<body>
     <header>header</header>
     <div id='main'>
        <article>This area has lot of content </article>`
        <nav> This nav should not scroll</nav>
        <aside>This aside too</div></aside>
     </div>
     <footer>footer</footer>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS:

body {
   /*font: 24px Helvetica;*/
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }

  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sah*_*hir -1

我已经从代码笔中拿起了代码，并根据需要用侧边栏制作了一些逻辑重写了JS代码。 希望它有帮助:)

var stickArea = $('aside ul');
var footArea = $('footer');
margin = 10;
offtop = stickArea.offset().top - margin;
offbtm = footArea.offset().top - (margin * 3 + stickArea.height());

$(window).scroll(function() {
  topScr = $(window).scrollTop();
  if (topScr > offtop && stickArea.hasClass('natural')) {
    stickArea.removeClass('natural').addClass('fixed').css('top', margin);
  }
  if (offtop > topScr && stickArea.hasClass('fixed')) {
    stickArea.removeClass('fixed').addClass('natural').css('top', 'auto');
  }
  if (topScr > offbtm && stickArea.hasClass('fixed')) {
    stickArea.removeClass('fixed').addClass('bottom').css('top', offbtm);
  }
  if (offbtm > topScr && stickArea.hasClass('bottom')) {
    stickArea.removeClass('bottom').addClass('fixed').css('top', margin);
  }
});

Run Code Online (Sandbox Code Playgroud)

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.master {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.master .inner-w {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-preferred-size: 960px;
  flex-basis: 960px;
}

.master main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

@media (min-width: 900px) {
  .master main {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.master .content {
  -ms-flex-preferred-size: 70%;
  flex-basis: 70%;
  min-height: 2000px;
}

.master aside {
  -ms-flex-preferred-size: 350px;
  flex-basis: 350px;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.master aside .widget-list {
  width: 330px;
}

body.sticky-sidebar .master aside .widget-list {
  position: fixed;
  top: 10px;
}

body {
  margin: 0;
  background: #add8e6;
  padding: 10px;
}

.master {
  background: #90ee90;
}

.master .inner-w {
  padding: 10px;
}

.master header,
.master .content,
.master aside,
.master footer {
  padding: 10px;
}

.master header {
  background: #ffc0cb;
  min-height: 120px;
}

.master .content {
  background: #f5deb3;
}

.master aside {
  background: #ffd700;
  min-height: 400px;
}

.master aside .widget-list {
  background: #d3d3d3;
  padding: 10px;
}

.master aside .widget-list .widget {
  background: rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.master aside .widget-list .widget:not(:first-of-type) {
  margin-top: 10px;
}

.master footer {
  background: #808080;
  min-height: 500px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


/** additional Css For Sidebar Logic **/

.master aside .widget-list.fixed {
  position: fixed;
}

.master aside .widget-list.bottom {
  position: absolute;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='master'>
  <div class='inner-w'>

    <header>
      <h1>Attempts at a sticky sidebar for squishy and more-complex flex-box layouts - sorta ~ eh?</h1>
    </header>

    <main>
      <div class='content'>
        content
      </div>

      <aside class="">
        <ul class='widget-list natural'>
          <li class='widget'>
            widget 1
          </li>
          <li class='widget'>
            widget 2
          </li>
          <li class='widget'>
            widget 3
          </li>


        </ul>
      </aside>
    </main>

    <footer>
      footer
    </footer>

  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	876 次
最近记录：	7 年，8 月前