为什么我的粘性侧边栏在侧边栏顶部留有空白？

问题描述 投票：0回答：1

它确实从内容顶部一直到侧边栏留下了空白，而侧边栏在滚动时仍然保持在左侧。

let sidebar = document.getElementsByClassName("blog-sidebar")[0];
let sidebar_content = document.getElementsByClassName("content-wrapper")[0];


window.onscroll = () =>{
  let scrollTop = window.scrollY;
  let viewportHeight = window.innerHeight;
  let contentHeight = sidebar_content.getBoundingClientRect().height;
  let sidebarTop = sidebar.getBoundingClientRect().top + window.pageYOffset;


  if(scrollTop >= contentHeight - viewportHeight + sidebarTop){
    sidebar_content.style.transform = `translateY(-${contentHeight - viewportHeight + sidebarTop}px)`;
    sidebar_content.style.position = "fixed";
  }
  else{
    sidebar_content.style.transform = "";
    sidebar_content.style.position = "";
  }
}
.blog-sidebar .content-wrapper .sidebar-bookmark{
    display: none;
    float:left;
}

.bookmark-list{
        left:0px;
    top:0px;
}
.bookmark ul{
    padding:0px;
    margin:0px;
}
.blog-sidebar .bookmark-list{
    width: calc(14vw + 30px);
        max-width: 215px;
    padding:0px;
    margin:0px;
}

.sidebar-bookmark ul{
    display: block;
    list-style: none;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.bookmark-list a{
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: #93A1B0;
    border-bottom: none;
    padding-left: 36px;
    margin-bottom: 30px;
    transition-timing-function: ease-in-out
}
.blog-sidebar .content-wrapper a{
    border:none;
}

.blog-sidebar .content-wrapper a:hover{
    color:#4b5968;
    transition: all 0.15s ease-in-out
}

.bookmark .bookmark-list > a{
    text-decoration: none;
}
@media (min-width: 1200px){
  .blog-sidebar .content-wrapper .sidebar-bookmark {
    display: block;
  }
  .blog-single-simple .right-bar .post-content{
    margin-top:-90px;
  }
  .blog-single .right-bar .post-content{
    margin-top:-110px;
  }
  #blog-single-cection{
    scroll-behavior: smooth;
  }
}
@media (max-height: 710px){
  .blog-sidebar .bookmark-list a{
      margin-bottom: 15px;
  }
}
<div class="blog-sidebar bookmark left-bar">
  <div class="content-wrapper">
    <ul class="sidebar-bookmark bookmark-list ">
      <li>
        <a href="#prerequisites">What are the prerequisites to become a part of fashion industry?</a>
        <ul class="sub-bookmark">
          <li>
            <a href="#fashionStylist">Fashion Stylist</a>
          </li>
          <li>
            <a href="#merchandiser">Merchandiser</a>
          </li>
          <li>
            <a href="#fashionDesigner">Fashion Designer</a>
          </li>
          <li>
            <a href="#textileDesigner">Textile Designer</a>
          </li>
          <li>
            <a href="#graphicDesigner">Graphic Designer</a>
          </li>
          <li>
            <a href="#creativeDirector">Creative Director</a>
          </li>
          <li>
            <a href="#technicalDesigner">Technical Designer
          </li>
          <li>
            <a href="#qualityAssurance">Quality Assurance</a>
          </li>
          <li>
            <a href="#productionManager">Production Manager</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#coaching">MAD school : Coaching & Training center</a>
      </li>
    </ul>
  </div>
</div>

另外我想问一下如何才能实现平滑滚动的效果，因为单击侧边栏的选项卡时它没有按我的预期工作

javascript css sidebar sticky
1个回答
0
投票

您似乎正在尝试创建一个具有固定位置的侧边栏，在滚动时粘在左侧，并且您还希望在单击侧边栏链接时添加平滑滚动。为此，您可以对现有代码进行一些修改：

  1. 将 
    position: fixed
    CSS 属性添加到 
    .blog-sidebar
    类，以在滚动时保持侧边栏固定。
  2. 修改 
    window.onscroll
    事件以正确更新侧边栏的位置。
  3. 使用 
    scroll-behavior
    CSS 属性为侧边栏链接添加平滑滚动。

这是更新后的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <!-- Add your CSS link here -->
</head>
<body>
  <div class="blog-sidebar bookmark left-bar">
    <div class="content-wrapper">
      <!-- Your sidebar content here -->
    </div>
  </div>
  <div class="main-content">
    <!-- Your main content here -->
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS（样式.css）：

/* Your existing CSS styles here */
.blog-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(14vw + 30px);
  max-width: 215px;
  /* Add other styling properties as needed */
}

/* Add this to enable smooth scrolling */
html {
  scroll-behavior: smooth;
}

JavaScript（script.js）：

let sidebar = document.querySelector(".blog-sidebar");
let sidebar_content = document.querySelector(".content-wrapper");

window.onscroll = () => {
  let scrollTop = window.scrollY;
  let viewportHeight = window.innerHeight;
  let contentHeight = sidebar_content.getBoundingClientRect().height;
  let sidebarTop = sidebar.getBoundingClientRect().top + window.pageYOffset;

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

确保在 HTML 中链接 CSS 和 JS 文件。通过这些更改，您的侧边栏在滚动时应保持在左侧，并且单击时链接应具有平滑的滚动效果。

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