Question

所以我有一个div只有一些高度宽度和背景颜色，我希望这个div从一段内容的顶部开始，当你向下滚动它跟着你像一个侧边栏然后当你到达它停止的部分的末尾。到目前为止，这是我的代码：

$('.page-home .showcase').scroll(function() {
    $('.page-home .showcase .left-sidebar').animate({
        top: $(this).scrollTop()
    });
});


.page - home.showcase {
        background - color: #f9f9f9;
        padding: 100 px 0;
    }
    .page - home.showcase.left - sidebar {
        display: block;
        position: absolute;
        width: 15 px;
        height: 350 px;
        background - color: #e84d5b;
        z - index: 999;
    }
    .page - home.showcase.showcase - content h2 {
        font - size: 60 px;
        font - weight: 700;
        text - transform: uppercase;
        color: #000; 
}
.page-home .showcase .showcase-content p {
  font-size: 24px;
  margin-top: 60px;
}
.page-home .showcase .showcase-content a {
  margin-top: 60px;
  font-size: 17px; 
}
.page-home .showcase .showcase-content hr {
  left: 15px;
  position: absolute;
  margin-top: 50px; 
}

<div class="showcase">
    <div class="container-fluid">
        <div class="row">
            <div class="left-sidebar"></div>
            <div class="col-md-5 col-md-offset-2">
                <div class="showcase-content">
                    <h2>AAAA</h2>
                    <p>We’re strategists, producers and doers. Collectively you could call us a design and innovation studio.
                        <br>
                        <br>
                        <span>We love what we do... <strong>uncovering your brand’s potential.</strong></span></p>
                    <a href="#" class="btn btn-custom">Case study</a>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>

我是JQuery的菜鸟所以任何帮助都值得赞赏!!

Answer 1

这是一个你可以离开的想法：

$(function() {
  var $window = $(window),
    $content = $('#content'),
    $aside = $('#aside');

  // Make initial adjustment
  adjustAside();

  // Adjust on scroll event
  $window.scroll(adjustAside);

  function adjustAside() {
    // Bounds relative to viewport
    var $contentRect = $content[0].getBoundingClientRect();

    // Div associated with sidebar has moved up past viewport
    if ($contentRect.top < 0) {
      var $asideHeight = $aside.outerHeight();

      // Move sidebar down as long as it still fits inside associated div
      if ($contentRect.bottom > $asideHeight) {
        $aside.css({
          marginTop: $contentRect.top * -1
        })
      } else {
        $aside.css({
          marginTop: $content.innerHeight() - $asideHeight
        })
      }
    } else {
      // Set sidebar to top of associated div
      $aside.css({
        marginTop: 0
      })
    }
  }
});

body {
  height: 2000px;
}
#content {
  border: 1px solid red;
  margin-top: 300px;
  padding-right: 220px;
  position: relative;
}
#aside {
  border: 1px solid green;
  width: 200px;
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
SCROLL DOWN
<br>.
<br>.
<br>.
<div id="content">
  <div id="aside">I will follow him... follow him wherever he may gooooo</div>
  The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly
  on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in
  spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain.
</div>

<div>
  The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain.
</div>

JQuery div从上到下依次介绍

1 个答案: