Javascript 粘性侧边栏未粘在Vue.js中_Javascript_Html_Css_Vue.js_Sticky

Javascript 粘性侧边栏未粘在Vue.js中

javascript html css vue.js

Javascript 粘性侧边栏未粘在Vue.js中,javascript,html,css,vue.js,sticky,Javascript,Html,Css,Vue.js,Sticky,我在许多项目中使用了一个简单的、粘性的边栏组件，但它没有出现任何问题，在经历了太多时间的破坏之后，我找到了一个导致其他问题的部分解决方案这个边栏使用flexbox将边栏保持在适当的位置，并将容器div视为页面的主体不幸的是，我一开始在Vue.js中使用它，它就坏了。我最初认为这是因为元素高度没有响应动态填充的内容，但事实并非如此包装器结构如下所示： <html> <body> <div class="wrapper">

我在许多项目中使用了一个简单的、粘性的边栏组件，但它没有出现任何问题，在经历了太多时间的破坏之后，我找到了一个导致其他问题的部分解决方案

这个边栏使用flexbox将边栏保持在适当的位置，并将容器div视为页面的主体

不幸的是，我一开始在Vue.js中使用它，它就坏了。我最初认为这是因为元素高度没有响应动态填充的内容，但事实并非如此

包装器结构如下所示：

<html>
   <body>
      <div class="wrapper">
         <div id="sidebar>
         </div>
         <div class="container">
         </div>
      </div>
   </body>
</html>

注意：通过将

主体高度设置为100%，我确实成功地使侧边栏看起来像粘住了一样，但实际链接仍然滚动，即使您可以看到侧边栏。此外，这破坏了网站中最重要的页面之一上使用的FlatPicker日期选择器的布局属性。显然，这不是一个站得住脚的解决方案，因为一个可见但没有交互的侧边栏是无用的，我需要我的页面来实际工作
为了清楚起见，我选择使用粘滞
而不是固定
，因为我想利用flexbox将页面内容的容器有效地设置在边栏旁边，而不是简单地使用边距将其推到边栏上，以防被边栏覆盖
这里有一个（混乱，我很抱歉——它是从一个更大的项目中提取出来的）代码沙盒，向您展示上下文中的侧边栏
您能再解释一下吗？预期的行为是什么？你说它坏了，什么意思？这个codesandbox是否显示了预期的行为，或者bug行为？我建议您使用它，它只是一个编写良好的组件，可以抽象出所需的大部分工作。当然！通过“粘贴”，我的意思是边栏应该在页面内容滚动时始终保持可见和交互。我说它坏了，因为我在普通html项目（即没有Vue或其他JS支持的接口）上使用了相同的边栏代码，没有任何问题。沙箱显示了错误行为。1。Dispatch.vue组件的包装器有一个a-wrapper
类，但没有关联的样式。2.您的Sidebar.vue组件有一个带有关联样式的包装器类（注意名称不匹配），但该类没有被使用。它还具有作用域，因此在该组件之外使用时，类的样式将不适用。我想你的问题与此有关。我也从未在flexbox布局中看到过粘性元素，不确定它的行为……啊，好主意！这是由于Vuetify的干扰而将wrapper
更改为a-wrapper的结果。a-wrapper类在全局css文件中定义，并在Dispatch.vue文件中使用。
html {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
}

body {
  overflow-x: hidden;
  margin: 0;
  min-height: 100%;
  position: relative;
  background-size: 100vw 100vh;
  background-attachment: fixed !important;
  width: 100%;
}
.wrapper {
    display: flex;
    align-items: stretch;
}
#sidebar {
  height: 100vh;
  position: sticky;
  position: -webkit-sticky;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}