草庐IT

javascript - 水平滚动，粘性 div 保持在左边框

coder 2023-08-06 原文

我有两行数据(绿色)和一个标题(红色)，它们应该始终可见:

查看我已有的示例:

http://jsfiddle.net/j9C8R/33/

现在红色标题随内容一起滚动，但它应该保持在现在的位置，但会随内容垂直滚动(MS Excel 样式)。

如何实现(最好只使用 CSS)。

更新:重要的是红色标题与相应的内容一起垂直滚动，但在水平滚动时保持在左边缘。

.main {
  background-color: blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  overflow: scroll;
  clear: both;
  width: 1000px;
  background-color: yellow;
}

.sticky,
.content {
  float: left;
  width: 150px;
  border: 1px solid black;
}

.sticky {
  background-color: red;
}

.content {
  background-color: green;
}
<div class="main">
  <div class="row">
    <div class="sticky">Sticky header A</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header B</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header C</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header D</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header E</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
  </div>
</div>

最佳答案

更新

请注意以下内容现在有点过时，因为我们有 css position sticky

原帖

我认为不可能通过纯 css 实现您的目标，因为粘性元素通常使用 position:fixed 不幸的是，它相对于视口(viewport)固定了它们。

通过使用 javascript(在本例中为 jquery 库)和绝对定位，您应该能够实现您的目标:

$('.main').scroll(function() {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});
.main {
    background-color:blue;
    overflow:scroll;
    height:200px;
    width:400px;
}
.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative;
    background-color:yellow;
    padding-left:150px;
    box-sizing:border-box;
}
.sticky, .content {
    float:left;
    width:150px;
    border:1px solid black;
}
.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}
.content {
    background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
</div>

关于javascript - 水平滚动，粘性 div 保持在左边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16086812/

javascriptdivclass34jquerycsshtml

有关javascript - 水平滚动，粘性 div 保持在左边框的更多相关文章

  1. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  2. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 如何保持我不常用的编程语言技能 - 2

    关闭。这个问题是off-topic.它目前不接受答案。想改进这个问题吗？Updatethequestion所以它是on-topic用于堆栈溢出。关闭11年前。Improvethisquestion我不经常使用ruby​​-通常它加起来相当于每两个月或更长时间编写一次脚本。我的大部分编程都是使用C++进行的，这与ruby​​有很大不同。由于我与ruby​​之间的差距如此之大，我总是忘记语言的基本方面(比如解析文本文件和其他简单的东西)。我想每天练习一些基本的东西，我想知道是否有一些我可以订阅的网站，并且会向我发送当天的Ruby问题或类似的东西。有人知道这样的站点/Internet服务吗？

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  7. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  8. ruby-on-rails - Ruby on Rails 中的水平数据库扩展 - 2

    我有一个RubyonRails应用程序和一个具有以下结构的PostgreSQL数据库:classA只有几个A，而且增长缓慢(比如一个月5个)。每个A有数千个B，每个B有数万个C(因此每个A有数百万个C)。A是独立的，并且永远不会同时需要来自不同A的B和C(即在同一查询中)。我的问题是现在我只有几个A，ActiveRecord查询需要很长时间。当C的表有数千万行时，查询将永远无法进行。我正在考虑水平扩展数据库(即A的一张表，B的一张表和每个A的一张C的表)。但我不知道该怎么做。我猜这是一种分片，但我无法弄清楚如何动态创建数据库表并使用ActiveRecord访问数据(如果该表取决于我正在

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

随机推荐