如何粘贴侧边栏底部？

问题描述 投票：0回答：1
<div class="main-container">
 <div class="container">
   <div class="main__left_sidebar"><div class="main__wrap1">Левая боковая панель</div></div>
   <div class="main-content">Основной контент</div>
   <div class="main__right_sidebar"><div class="main__wrap3"> Правая боковая панель</div></div>
 </div>
</div>

滚动到侧边栏末尾时我想粘住它。但是当我使用 

sidebarStick()
时它会溢出页脚，因为我使用的是固定的。我正在尝试使用粘性。然而却做不到

 if(scrollTop >= contentHeight - viewportHeight + sidebarTop) {
            sidebar_content.style.transform = `translateY(-${contentHeight - viewportHeight + sidebarTop + margin_bottom}px)`;
            sidebar_content.style.position = "fixed";
        }

侧边栏结束时如何粘住以免超出页脚？完整的工作示例：

let left_sidebar = document.getElementsByClassName("main__left_sidebar")[0];
let right_sidebar = document.getElementsByClassName("main__right_sidebar")[0];

let left_sidebar_content = document.getElementsByClassName("main__wrap1")[0];
let right_sidebar_content = document.getElementsByClassName("main__wrap3")[0];


window.onscroll = () => {
  sidebarStick(left_sidebar, left_sidebar_content, 25);
  sidebarStick(right_sidebar, right_sidebar_content);

}

function sidebarStick(sidebar, sidebar_content, margin_bottom = 0) {
  let scrollTop = window.scrollY; // current scroll position
  let viewportHeight = window.innerHeight; //viewport height
  let contentHeight = sidebar_content.getBoundingClientRect().height; // current content height
  let sidebarTop = sidebar.getBoundingClientRect().top + window.scrollY; //distance from top to sidebar


  if (scrollTop >= contentHeight - viewportHeight + sidebarTop) {
    sidebar_content.style.transform = `translateY(-${contentHeight - viewportHeight + sidebarTop + margin_bottom}px)`;
    sidebar_content.style.position = "fixed";
  } else {
    sidebar_content.style.transform = "";
    sidebar_content.style.position = "";
  }
}
.main-container {
  margin: 0 auto;
  position: relative;
  padding: 0 30px;
  width: 100%;
  max-width: 1460px;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.main__left_sidebar,
.main__right_sidebar,
.main__wrap3,
.main__wrap1 {
  max-width: 290px;
  width: 100%;
}

.main-content {
  width: calc(100% - 628px);
}

.sidebar-right {
  max-width: 290px;
  width: 100%;
}

.box {
  color: white;
  width: 50px;
  background: red;
  height: 50px;
  margin: 10px 0;
}

footer {
  background: whitesmoke;
  text-align: center;
}
<div class="main-container">
  <div class="container">
    <div class="main__left_sidebar">
      <div class="main__wrap1">Левая боковая панель
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
      </div>
    </div>
    <div class="main-content">Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>Основной контент
      <br>
      <br>
    </div>
    <div class="main__right_sidebar">
      <div class="main__wrap3">Правая боковая панель
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
      </div>
    </div>
  </div>
</div>
<footer>
  Footer Footer Footer Footer Footer <br /> Footer Footer Footer Footer <br /> Footer Footer Footer Footer<br /> Footer Footer Footer Footer <br />
</footer>

javascript css
1个回答
0
投票

您始终可以使用 

position:sticky
并在您的设计中添加偏移量 
top
。

如果你的目标是一个简单的CSS而不使用任何jquery编码，你可以像这样使用它：

.samp-box {background:green;margin-bottom:32px;}
.mainbox {display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start;}
/*adjust the top positioning of an offset*/

.sidebar {position:sticky;top:15px;width:30%;background:red;color:#fff;}
.main {position:relative;width:60%;}
p {margin-bottom:15px;}
<div class="samp-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum sollicitudin molestie. Curabitur eu diam id eros vestibulum venenatis vehicula sit amet mi. Cras sed ullamcorper enim, at pulvinar eros. Quisque et mi vitae neque molestie pretium. Etiam ultricies eleifend orci vel tincidunt. Phasellus at dui vitae sem laoreet vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus turpis libero, et tincidunt tortor convallis ac.</p>
</div>
<div class="samp-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum sollicitudin molestie. Curabitur eu diam id eros vestibulum venenatis vehicula sit amet mi. Cras sed ullamcorper enim, at pulvinar eros. Quisque et mi vitae neque molestie pretium. Etiam ultricies eleifend orci vel tincidunt. Phasellus at dui vitae sem laoreet vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus turpis libero, et tincidunt tortor convallis ac.</p>
</div>

<div class="mainbox">
    <div class="sidebar">
        <ul>
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>

    <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum sollicitudin molestie. Curabitur eu diam id eros vestibulum venenatis vehicula sit amet mi. Cras sed ullamcorper enim, at pulvinar eros. Quisque et mi vitae neque molestie pretium. Etiam ultricies eleifend orci vel tincidunt. Phasellus at dui vitae sem laoreet vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus turpis libero, et tincidunt tortor convallis ac.</p>
        <p>Sed tincidunt tincidunt velit, vel semper odio ullamcorper nec. Suspendisse nunc tortor, ultrices sed ullamcorper id, vulputate nec augue. Cras feugiat tellus ac nisi semper mattis vel sit amet felis. Ut est erat, laoreet sed augue sit amet, scelerisque convallis nisi. Nulla facilisi. Nam in viverra lorem. Nulla at congue lacus, quis aliquet orci. Fusce arcu lectus, fringilla eget libero vitae, fringilla tincidunt neque. In hac habitasse platea dictumst. Proin magna leo, lobortis a dui vitae, dapibus laoreet velit. Fusce tincidunt sapien ornare placerat congue. Pellentesque laoreet sollicitudin tellus ut consectetur. Sed eu augue semper, facilisis leo in, vestibulum urna. Fusce hendrerit mauris vitae nulla bibendum, eget rhoncus est gravida. Vestibulum sapien purus, tristique at lobortis eget, molestie sit amet mi.</p>
        <p>Pellentesque vitae justo porttitor, aliquet ligula varius, iaculis odio. Suspendisse potenti. Nulla condimentum metus tortor, et feugiat erat bibendum et. Donec id pretium neque. Nunc lectus dolor, pretium vitae justo sed, viverra aliquet enim. In ut tortor enim. Suspendisse tempor feugiat orci ac ullamcorper. Aenean pharetra rhoncus blandit. Etiam nec erat non sapien molestie porttitor in sit amet dolor. </p>
        <p>Praesent sem lectus, molestie ut fermentum sit amet, faucibus vitae magna. Proin rhoncus eros quis orci hendrerit, non volutpat magna gravida. Quisque scelerisque nulla vestibulum imperdiet lacinia. Quisque ac nisl id lectus tincidunt egestas. Nullam tincidunt, leo eget sagittis malesuada, neque risus interdum lorem, id tempus erat lacus vel justo. Cras dictum ipsum diam, at tincidunt mi sollicitudin posuere. Aenean lorem augue, accumsan non magna hendrerit, vehicula vulputate justo. Ut a urna ac lacus commodo volutpat vel a metus. Pellentesque a est ut ex euismod elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque a rutrum augue.</p>
        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse luctus ipsum vitae massa consectetur imperdiet. Sed faucibus dui sit amet purus congue placerat. Pellentesque ut tortor tellus. Nulla tellus ante, finibus pulvinar ullamcorper tincidunt, vulputate non metus. Ut nec ullamcorper leo, in pellentesque orci. Integer luctus nisi at aliquam egestas. Aliquam neque dui, vulputate vel lectus sed, aliquet bibendum est.</p>
    </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.