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上稍微改了一下，注意到了行动

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

页面滚动时div位置

1 个答案: