粘性标题响应问题答案

【问题标题】：Sticky header responsive issues粘性标题响应问题
【发布时间】：2019-04-08 12:16:42
【问题描述】：

我正在尝试创建一个粘性侧边栏。它在桌面分辨率下工作正常，但不幸的是在响应式分辨率下不工作。并且粘性栏应该在移动分辨率中粘贴在内容的顶部，而不是像在桌面分辨率中那样位于左侧。如需更多说明，我将在此处附上我的 js 和 css 文件。 http://dev.netbramha.in/projects/sticky-header/index.js http://dev.netbramha.in/projects/sticky-header/style.css

你们能帮帮我吗？

<header>
  Header
</header>
<main>
  <div class="center">
    <div class="fullwidth">
      Full Width Block
    </div>
    <div class="row">
      <div class="left-sidebar">
        <div class="content">
          Sticky Sidebar
        </div>
      </div>
      <div class="main-content">
        Main Content
      </div>
    </div>
    <div class="fullwidth two">
      Full Width Block
    </div>
  </div>
</main>
<footer>
  Footer
</footer>

【问题讨论】：

你能插入一个你想要解释的工作的sn-p吗？
您可以通过插入相关示例图片来解释更多

标签： javascript css sidebar sticky

【解决方案1】：

对于响应式问题，您需要 css media queries 否则，您可以使用bootstrap（css 框架）自动在您的网站上进行响应

@media only screen and (max-width: 600px) {
    .left-sidebar .main-content{
        width: 100%;
    }
}

<header>
    Header
</header>
<main>
    <div class="center">
        <div class="fullwidth">
            Full Width Block
        </div>
        <div class="row">
            <div class="left-sidebar">
                <div class="content">
                    Sticky Sidebar
                </div>
            </div>
            <div class="main-content">
                Main Content
            </div>
        </div>
        <div class="fullwidth two">
            Full Width Block
        </div>
    </div>
</main>
<footer>
    Footer
</footer>

【讨论】：

【解决方案2】：

使用media query，如下所示。希望这会有所帮助。

.row {
  display: flex;
}

.left-sidebar {
  width: 30%;
}

@media only screen and (max-width: 720px) {
  .row {
    flex-wrap: wrap;
  }
  .left-sidebar {
    width: 100%;
  }
}

<header>
  Header
</header>
<main>
  <div class="center">
    <div class="fullwidth">
      Full Width Block
    </div>
    <div class="row">
      <div class="left-sidebar">
        <div class="content">
          Sticky Sidebar
        </div>
      </div>
      <div class="main-content">
        Main Content
      </div>
    </div>
    <div class="fullwidth two">
      Full Width Block
    </div>
  </div>
</main>
<footer>
  Footer
</footer>

【讨论】：