javascript - 页面滚动时的div位置

Question

我左右有两个 div，在左侧部分，我在滚动时将位置固定，当滚动即将完成时，我删除位置并将其设置为底部零。类似于 flipkart 的概念在他们的产品详细信息页面上。

这是我的代码。 Javascript

$(window).scroll(function() {
if ($(window).scrollTop() > 10 ) {   
   $(".fixedSlider").addClass("DivAffix");
   $(".fixedSlider").removeClass("DivBottom");
  if($(window).scrollTop() + $(window).height() > $(document).height()  - 100) {

    $(".fixedSlider").removeClass("DivAffix");
    $(".fixedSlider").addClass("DivBottom");
  }  
} else {

}
});

CSS

.DivAffix{position: fixed;width: 480px;}
.DivBottom{position: absolute;bottom: 0}    
.fixedSlider { min-height: 516px;}

它工作正常，但是当我提高分辨率时，左侧部分无法正常工作。它抽搐并降至底部。

Answer 1

实际上，在滚动 > 10 之后使用您的代码，它将添加/删除类，然后在滚动高于 window 之后同时 > 10 > 您的代码将在每个滚动条上添加/删除然后删除/添加类..

$(window).scroll(function() {
   if ($(window).scrollTop() > 10  && $(window).scrollTop() + $(window).height() < $(document).height()  - 100) {   
     $(".fixedSlider").addClass("DivAffix").removeClass("DivBottom");
  }
  if($(window).scrollTop() + $(window).height() > $(document).height()  - 100) {
    $(".fixedSlider").removeClass("DivAffix").addClass("DivBottom");
  }
});

这是演示 但我在 css 上做了一点更改以注意到操作

$(window).scroll(function() {
  if ($(window).scrollTop() > 10  && $(window).scrollTop() + $(window).height() < $(document).height()  - 100) {   
    $(".fixedSlider").addClass("DivAffix").removeClass("DivBottom");
  }
  if($(window).scrollTop() + $(window).height() > $(document).height()  - 100) {
    $(".fixedSlider").removeClass("DivAffix").addClass("DivBottom");
  }
});

#content{
  height : 2000px;
}
.DivAffix{position: fixed;width: 100px ; bottom : 0;}
.DivBottom{position: relative;bottom: 0}    
.fixedSlider {min-height: 116px;background : red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">Content</div>
<div class="fixedSlider">fixedSlider</div>