jquery - 滚动时使用 Jquery 更改 Div 宽度

Question

我正在尝试在用户向下滚动网页时更改我的 #opacity-div 宽度。如果用户向下滚动到 .paralax，则 #opacity-div 的宽度应为 200px。当用户向上滚动 .paralax 时，#opacity-div 的宽度应为 550px，这是 div 的默认宽度。

目前 .animate 用于抑制过渡。当用户向下滚动并且 div 的宽度为 200px 并且平滑过渡时，jQuery 代码起作用，但是当用户向上滚动时 #opacity-div 不会再次更改为 550px。

这里是使用的部分代码:

HTML

<div id="startsidabild">
  <div id="opacity"> </div>
  <nav>
    <ul>
      <li id="hemscroll">Hem</li>
      <li id="menyscroll">Meny</li>
      <li id="kontaktscroll">Kontakt</li>
    </ul>
  </nav>
  <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img src="images/pizza2.jpg" alt="pizzabild" class="img-responsive images">
      </div>
      <div class="item">
        <img src="images/pizza1.jpg" alt="pizzabild" class="img-responsive images">
      </div>
    </div>
  </div>

  <script>
    $('#myCarousel').carousel({
      interval: 2000
    })
  </script>
</div>
<div class="paralax">
  <h1>PARALAX</h1> </div>

jQuery

$(document).ready(function() {
  var targetOffset = $(".paralax").offset().top;
  var $w = $(window).scroll(function() {
    if ($w.scrollTop() > targetOffset) {
      $("#opacity").animate({
        width: "200px"
      });
    } else {
      $("#opacity").animate({
        width: "550px"
      });
    }
  });
});

CSS

#opacity {
width:550px;
position:fixed;
height:100vh;
background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
opacity: 1;
filter: Alpha(opacity=100);
z-index:1;
}

Answer 1

问题是，您的比较 if($w.scrollTop() > targetOffset) 忽略了窗口高度。

.scrollTop() = 顶部可滚动区域上方的隐藏像素。
offset().top = 相对于文档。

你应该比较的是，
$('.paralax').offset().top - $(window).height()(需要滚动才能使 .paralax 可见)
vs
$(window).scrollTop() 当前滚动

所以下面的代码将检查当前滚动是否大于显示 .paralax 所需的滚动

var targetOffset = $(".paralax").offset().top;
var winHeight    = $(window).height();

$(window).scroll(function(){
   var currentScroll = $(window).scrollTop();         // current Window scrollTop
   var scrollNeeded  = (targetOffset - winHeight);    // scroll needed to make .paralax visible
   $("#opacity").width(function(){
      return ( currentScroll < scrollNeeded ) ? 550 : 200 ; 
   }); 

});

---

由于当前调用了 jQuery scroll()，因此将 animate() 附加到此事件将耗尽内存。让我们使用 css transition 属性如下(参见更新的演示)

#opacity {
   ...
   -webkit-transition: width 2s;
   transition: width 2s; 
   ...

See Demo