Question

我正在尝试使用固定部分中的页面滚动滚动2 div。这是在线测试的实时网址

以上是该部分的屏幕截图。我也尝试过定位和滚动功能，但对我来说没什么用。

目前我正处于这个阶段

.main-content {
  width: 100%;
  background-color: #ccc;
  padding: 10px;
}

.left-flot-div,
.right-flot-div {
  width: 19%;
  height: 200px;
  background-color: #000;
  float: left;
}

.left-flot-div {
  margin-right: 1%;
}

.right-flot-div {
  margin-left: 1%;
}

.main-content-center {
  width: 60%;
  height: 1400px;
  background-color: red;
  float: left;
}

.clear {
  clear: both;
}

<div class="main-content">
  <div class="col-md-2">
    <div class="left-flot-div"></div>
  </div>
  <div class="col-md-8">
    <div class="main-content-center"></div>
  </div>
  <div class="col-md-2">
    <div class="right-flot-div"></div>
  </div>
  <div class="clear"></div>
</div>

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});

Answer 1

好吧，我通过使用这个代码实现了类似的效果:(在全屏或自举中运行它会做一些魔术）

/* Note: Try to remove the following lines to see the effect of CSS positioning */
      .affix {
          top: 20px;
          z-index: 9999 !important;
      }

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
      <h1>Bootstrap Affix Example</h1>
      <h3>Fixed (sticky) vertical sidenav on scroll</h3>
      <p>Scroll this page to see how the left navigation menu behaves with data-spy="affix".</p>
      <p><strong>The left menu sticks to the page when you have scrolled a specified amount of pixels.</strong></p>
    </div>
    <br>

    <div class="container">
      <div class="row">
        <nav class="col-sm-3">
          <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
            <li class="active"><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
          </ul>
        </nav>
        <div class="col-sm-6">   
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1><h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1><h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1><h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
          <h1>Some text to enable scrolling</h1>
        </div>
        <nav class="col-sm-3">
          <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
            <li class="active"><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
          </ul>
        </nav>
      </div>
    </div>

    </body>
    </html>

我相信你在某种程度上覆盖了词缀类，这就是为什么它不起作用。在任何其他情况下，你可以张贴一个jsfiddle？此外，它可能会影响您正在使用相同元素中的大小编写div的情况。我在你的网页上实现了同样的效果，但在你发布一个jsfiddle

之前我并不完全确定

浮动Div与窗口滚动固定部分

1 个答案: