Question

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

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

以下是使用代码的部分内容：

HTML

550px

的jQuery

<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>

CSS

$(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"
      });
    }
  });
});

Answer 1

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

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

你应该比较的是，
$('.paralax').offset().top - $(window).height()（需要滚动才能使.paralax可见）左对 $(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

在滚动时使用Jquery更改Div宽度

1 个答案: