Question

使用图片更新

我正在使用此代码将div粘贴到确定的区域：

$(function() {
  "use strict";
  var $sidebar = $("#artist"),
    $window = $(window),
    $footer = $("#contact-box"), // use your footer ID here
    offset = $sidebar.offset(),
    foffset = $footer.height(),
    threshold = foffset.height - $sidebar.height() - offset.top,
    topPadding = 15;

  $window.scroll(function() {
    if ($window.scrollTop() > threshold) {
      $sidebar.stop().animate({
        marginTop: threshold
      }, 900);
    } else if ($window.scrollTop() > offset.top) {
      $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top + topPadding
      }, 900);
    } else {
      $sidebar.stop().animate({
        marginTop: 0
      }, 1000);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="variable-content-container">
  <div id="contact-box">

    <div id="contact-spacer"></div>
    <!--ends ------------------------->



    <div id="acervo-variable-head">
      <div id="acervo-middle-arrow-wrapper"><span id="acervo-recents">dossiê</span></div>
    </div>
    <!-- acervo-variable-head ends ------------------------->


    <div id="dossie-locations">
      <div id="artist"><img src="snippets/artist.jpg" width="224" height="341" alt="" /></div>
      <div id="dossie-area">
        <span class="destaque">John Doe</span> <br /> Example #01 <br />
        <span class="destaque">Example 02</span> FFFFF <br />
        <span class="destaque">Example text:</span> Example Test <br />
        <span class="destaque">Example:</span> Example <br /> Example <br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sed dui nec ornare. Nullam vel gravida felis. Etiam laoreet lectus sed nisl sodales venenatis. Vivamus
        facilisis, dui sit amet ultrices condimentum, lectus sapien congue libero, aliquam efficitur mauris nisi vitae dui. Integer suscipit ultricies turpis, sed mollis tortor aliquet sed. Ut ultrices erat ut velit porttitor mollis. Pellentesque aliquet
        imperdiet libero, eu scelerisque leo auctor id. Aenean eget gravida sapien. Vestibulum at nibh ullamcorper, pharetra nunc sed, varius tellus. Sed lobortis sem enim, convallis mattis tortor imperdiet eu. Integer a consectetur erat. Nulla facilisi.
        Nunc sit amet ipsum sapien. Pellentesque dignissim mi ac nunc malesuada viverra. Morbi nec lorem eget dui vehicula mollis. <br /><br /><br />
      </div>
      <!--dossie-area-->
    </div>
    <!--dossie-locations-->


  </div>
  <!--contact-box ends ------------------------->
</div>
<!--variable-content-container ends ------------------------->

#contact-box 是容器， #artist 是粘性的。我需要在联系人框结束时10px的粘性停止。但 div＃artist 正在扩展联系人框 div的大小。

更新CSS

#artist {
width: 224px;
height: 341px;
float: left;
position: relative;

#contact-box {
    height: auto;
    min-width: auto;
    min-height: 536px;
    margin-left: auto;
    margin-right: auto;
    background-color: #100b0f;
    background-image: url(../sndippets/brown-glow.png);
    background-repeat: no-repeat;
    font-weight: normal;
    position: relative;
    overflow: auto; /*To make div height according content*/
}

Answer 1

我添加了bottomPadding = 40;。这设置了相对于dossie区域底部的停止点。

$(function() {
  "use strict";
  var $sidebar = $("#artist"),
    $window = $(window),
    $footer = $("#contact-box"), // use your footer ID here
    offset = $sidebar.offset(),
    foffset = $footer.height(),
    threshold = foffset.height - $sidebar.height() - offset.top,
    topPadding = 15,
    bottomPadding = 40,
    $dossieArea = $("#dossie-area"),
    dossieAreaHeight = $dossieArea.height(),
    sidebarHeight = $sidebar.height();

  $window.scroll(function() {
    var scrollTop = $window.scrollTop();

    if (scrollTop < (dossieAreaHeight - sidebarHeight - bottomPadding)) {
      if (scrollTop > threshold) {
        $sidebar.stop().animate({
          marginTop: threshold
        }, 900);
      } else if (scrollTop > offset.top) {
        $sidebar.stop().animate({
          marginTop: scrollTop - offset.top + topPadding
        }, 900);
      } else {
        $sidebar.stop().animate({
          marginTop: 0
        }, 1000);
      }
    }
  });
});

#artist {
  float: left;
}

#artist img {
  width: 112px;
  height: 170px;
  float: left;
}

#dossie-area {
  float: left;
  width: 400px;
}

#contact-box {
  height: auto;
  min-width: auto;
  min-height: 536px;
  margin-left: auto;
  margin-right: auto;
  /*background-color: #100b0f; */
  background-image: url(../sndippets/brown-glow.png);
  background-repeat: no-repeat;
  font-weight: normal;
  position: relative;
  overflow: auto;
  /*To make div height according content*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="variable-content-container">
  <div id="contact-box">

    <div id="contact-spacer"></div>
    <!--ends ------------------------->

    <div id="acervo-variable-head">
      <div id="acervo-middle-arrow-wrapper"><span id="acervo-recents">dossiê</span></div>
    </div>
    <!-- acervo-variable-head ends ------------------------->


    <div id="dossie-locations">
      <div id="artist"><img src="https://www.google.co.nz/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" /></div>
      <div id="dossie-area">
        <span class="destaque">John Doe</span> <br /> Example #01 <br />
        <span class="destaque">Example 02</span> FFFFF <br />
        <span class="destaque">Example text:</span> Example Test <br />
        <span class="destaque">Example:</span> Example <br /> Example <br /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sed dui nec ornare. Nullam vel gravida felis. Etiam laoreet lectus sed nisl sodales venenatis. Vivamus
        facilisis, dui sit amet ultrices condimentum, lectus sapien congue libero, aliquam efficitur mauris nisi vitae dui. Integer suscipit ultricies turpis, sed mollis tortor aliquet sed. Ut ultrices erat ut velit porttitor mollis. Pellentesque aliquet
        imperdiet libero, eu scelerisque leo auctor id. Aenean eget gravida sapien. Vestibulum at nibh ullamcorper, pharetra nunc sed, varius tellus. Sed lobortis sem enim, convallis mattis tortor imperdiet eu. Integer a consectetur erat. Nulla facilisi.
        Nunc sit amet ipsum sapien. Pellentesque dignissim mi ac nunc malesuada viverra. Morbi nec lorem eget dui vehicula mollis. <br /><br /><br />
      </div>
      <!--dossie-area-->
    </div>
    <!--dossie-locations-->

  </div>
  <!--contact-box ends ------------------------->
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sed dui nec ornare. Nullam vel gravida felis. Etiam laoreet lectus sed nisl sodales venenatis. Vivamus facilisis, dui sit amet ultrices condimentum, lectus sapien congue libero, aliquam
    efficitur mauris nisi vitae dui. Integer suscipit ultricies turpis, sed mollis tortor aliquet sed. Ut ultrices erat ut velit porttitor mollis. Pellentesque aliquet imperdiet libero, eu scelerisque leo auctor id. Aenean eget gravida sapien. Vestibulum
    at nibh ullamcorper, pharetra nunc sed, varius tellus. Sed lobortis sem enim, convallis mattis tortor imperdiet eu. Integer a consectetur erat. Nulla facilisi. Nunc sit amet ipsum sapien. Pellentesque dignissim mi ac nunc malesuada viverra. Morbi
    nec lorem eget dui vehicula mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sed dui nec ornare. Nullam vel gravida felis. Etiam laoreet lectus sed nisl sodales venenatis. Vivamus facilisis, dui sit amet ultrices condimentum,
    lectus sapien congue libero, aliquam efficitur mauris nisi vitae dui. Integer suscipit ultricies turpis, sed mollis tortor aliquet sed. Ut ultrices erat ut velit porttitor mollis. Pellentesque aliquet imperdiet libero, eu scelerisque leo auctor id.
    Aenean eget gravida sapien. Vestibulum at nibh ullamcorper, pharetra nunc sed, varius tellus. Sed lobortis sem enim, convallis mattis tortor imperdiet eu. Integer a consectetur erat. Nulla facilisi. Nunc sit amet ipsum sapien. Pellentesque dignissim
    mi ac nunc malesuada viverra. Morbi nec lorem eget dui vehicula mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus sed dui nec ornare. Nullam vel gravida felis. Etiam laoreet lectus sed nisl sodales venenatis. Vivamus facilisis,
    dui sit amet ultrices condimentum, lectus sapien congue libero, aliquam efficitur mauris nisi vitae dui. Integer suscipit ultricies turpis, sed mollis tortor aliquet sed. Ut ultrices erat ut velit porttitor mollis. Pellentesque aliquet imperdiet libero,
    eu scelerisque leo auctor id. Aenean eget gravida sapien. Vestibulum at nibh ullamcorper, pharetra nunc sed, varius tellus. Sed lobortis sem enim, convallis mattis tortor imperdiet eu. Integer a consectetur erat. Nulla facilisi. Nunc sit </div>
</div>
<!--variable-content-container ends ------------------------->

带端点的粘贴侧边栏

1 个答案: