主页 / 问题 / 737553
Accepted
Игорь
Asked:2020-10-30 02:50:06 +0000 UTC2020-10-30 02:50:06 +0000 UTC

粘性侧边栏。到达页脚时如何删除固定

  • 772

有一个侧边栏接收大于标题高度的滚动类stickyc 。position: fixed;当侧边栏的底部到达页脚的顶部时，我不知道如何将其删除。链接到沙盒。

function stickySidebar() {
  var scrollDistance = $(this).scrollTop();
  var headerHeight = $('.header').height();
  var $sidebar = $('aside');
  
  if (scrollDistance > headerHeight + 5) {
    $sidebar.addClass('sticky');
  } else {
    $sidebar.removeClass('sticky');
  }
}
stickySidebar();
$(window).scroll(function() {
  stickySidebar();
})
body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.wrapper > * {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.wrapper > *:last-child {
  margin-bottom: 0;
}
.wrapper .header,
.wrapper .footer {
  width: 100%;
  background: #d3d3d3;
}
.wrapper .header {
  height: 30px;
}
.wrapper .footer {
  height: 300px;
}
.wrapper .main {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
}
.wrapper .main .aside {
  height: 100px;
  width: 200px;
  margin-right: 5px;
  background: #d3d3d3;
}
.wrapper .main .aside.sticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  background: yellow;
}
.wrapper .main .section {
  height: 150vh;
  width: calc(100% - 205px);
  background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header class="header">Header</header>
  <main class="main">
    <aside class="aside">Sticky Sidebar</aside>
    <section class="section">Main Content</section>
  </main>
  <footer class="footer">Footer</footer>
</div>

javascript

1 个回答

  1. Best Answer

    "use strict";

$(document).ready(function() {

  function stickySidebar() {
   	var scrollDistance = $(document).scrollTop(),
        headerHeight = $('.header').outerHeight(true),
        sidebarHeight = $('aside').outerHeight(true),
        footerOffsetTop = $('.footer').offset().top,
        $sidebar = $('aside');
    
    if( scrollDistance >= headerHeight) {
      $sidebar.addClass('sticky');
    } else {
      $sidebar.removeClass('sticky');
    }
    
    if ( scrollDistance + sidebarHeight  >= footerOffsetTop) {
      $sidebar.removeClass('sticky');
    }
    
  }
  stickySidebar();
  
  $(document).scroll(function() {
    stickySidebar();
  });
  
});
    body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.wrapper > * {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.wrapper > *:last-child {
  margin-bottom: 0;
}
.wrapper .header,
.wrapper .footer {
  width: 100%;
  background: #d3d3d3;
}
.wrapper .header {
  height: 30px;
}
.wrapper .footer {
  height: 300px;
}
.wrapper .main {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
}
.wrapper .main .aside {
  height: 100px;
  width: 200px;
  margin-right: 5px;
  background: #d3d3d3;
}
.wrapper .main .aside.sticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  background: yellow;
}
.wrapper .main .section {
  height: 150vh;
  width: calc(100% - 205px);
  background: #d3d3d3;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header class="header">Header</header>
  <main class="main">
    <aside class="aside">Sticky Sidebar</aside>
    <section class="section">Main Content</section>
  </main>
  <footer class="footer">Footer</footer>
</div>

    • 3

相关问题