滚动时使用 Jquery 更改 Div 宽度答案

【问题标题】：Div width change with Jquery on scroll滚动时使用 Jquery 更改 Div 宽度
【发布时间】：2016-03-23 21:32:10
【问题描述】：

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

目前.animate 用于进行令人窒息的过渡。 jQuery 代码在用户向下滚动并且 div 的宽度为 200px 且平滑过渡时起作用，但当用户向上滚动时，#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;
}

【问题讨论】：

标签： jquery html css

【解决方案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

【讨论】：

我怎样才能将 .animate 添加到此？