页面滚动时的div位置 [英] div positions while page scroll

问题描述

我在左侧和右侧分别有两个div，在滚动时我固定了位置，当滚动即将结束时，我移除了位置并将其设置为底部0.像flipkart这样的概念也出现在其产品详细信息页面上.

I have two div left and right and on left part I set position fixed while scrolling and when scroll is about to finish I remove position and set it to bottom zero. Similar concept like flipkart does on their product detail page.

这是我的代码. Javascript

This is my code for that. 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;}

它工作正常，但是当我提高分辨率时，左侧部分无法正常工作.它会抽搐并设置在底部.

It's working fine but when I increase the resolution the left part not working properly. It jerks and set to bottom.

推荐答案

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

Actually with your code after scroll > 10 it will add/remove class then after scroll higher than window which in the same time > 10 your code will add/remove then remove/add classes on each scroll ..

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

这篇关于页面滚动时的div位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！