Javascript 如何计算另一个元素上滚动速度的倍增因子，以便它们同时到达终点（视图顶部）_Javascript_Jquery_Html_Css

Javascript 如何计算另一个元素上滚动速度的倍增因子，以便它们同时到达终点（视图顶部）

javascript jquery html css

Javascript 如何计算另一个元素上滚动速度的倍增因子，以便它们同时到达终点（视图顶部）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图以比文章主要内容更慢的速度创建一个侧边栏滚动条，这样它可以在视图中停留更长的时间。当元素到达屏幕顶部时将锁定我见过类似的方法，但它们通常基于固定位置的元素请参阅底部的JSFIDLE示例，了解它的行为 HTML JS .header { width: 100%; min-height: 300px; } .container { margin: 0 auto; width: 80%; overflow:hidden; background-color: #FF0

我试图以比文章主要内容更慢的速度创建一个侧边栏滚动条，这样它可以在视图中停留更长的时间。当元素到达屏幕顶部时将锁定

我见过类似的方法，但它们通常基于固定位置的元素

请参阅底部的JSFIDLE示例，了解它的行为

HTML

.header {
  width: 100%;
  min-height: 300px;
}
.container {
  margin: 0 auto;
  width: 80%;
  overflow:hidden;
  background-color: #FF00FF;
  display: block;
}
.main {
  width: 65%;
  float: left;
  min-height: 800px;
  background-color: #00ff00;
}
.sidebar {
  width: 30%;
  float: right;
  min-height: 400px;
  background-color: #ff0000;
}
.container.fixed .sidebar {}
.footer {
  clear: both;
  min-height: 2000px;
  width: 100%;
}

  $(document).ready(function() {
    $(window).scroll(function() {
      var sb = $('.sidebar');
      var mn = $('.main');
      var cn = $('.container');
      var height = $(window).height();
      var mnStart = mn.offset().top;
      var mnHeight = mn.height();
      var sbHeight = sb.height();
      var sbLock = cn.height() - sb.height();
      var scrolled = $(window).scrollTop();
      var sbScroll = -(scrolled - mnStart) * ((height - mnHeight) / (height - sbHeight));
      if (scrolled >= mnStart && sbScroll <= sbLock) {
        sb.css({
          transform: 'translate3d(0,' + sbScroll + 'px,0'
        });
      } else if (scrolled < mnStart){
        sb.css({
          transform: 'translate3d(0,' + 0 + 'px,0'
        });
      } else if (sbScroll > sbLock){
        sb.css({
          transform: 'translate3d(0,' + sbLock + 'px,0'
        });         
      }
    });
  });

.header {
  width: 100%;
  min-height: 300px;
}

.container {
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
  background-color: #FF00FF;
  display: block;
}

.main {
  width: 65%;
  float: left;
  min-height: 8000px;
  background-color: #00ff00;
}

.sidebar {
  width: 30%;
  float: right;
  min-height: 400px;
  background-color: #ff0000;
}

.container.fixed .sidebar {}

.footer {
  clear: both;
  min-height: 2000px;
  width: 100%;
}

  $(document).ready(function() {
    $(window).scroll(function() {
        slowScroll('.main','.sidebar');
    });
    function slowScroll(obj1, obj2) {
      var long, short;
      if ($(obj1).height() > $(obj2).height()) {
        long = $(obj1);
        short = $(obj2);
      } else {
        long = $(obj2);
        short = $(obj1);
      }
      var lHeight   = long.height(); // Height of longest element
      var sHeight   = short.height(); // Height of shortest element
      var sLock     = lHeight - sHeight; // What position from top the shortest element should lock in at
      var startPos  = long.offset().top; // The start position relevant to document (offset from top)
      var scrolled  = $(window).scrollTop(); // Current value scrolled from top
      var lScrolled = ((scrolled - startPos) >= 0) ? (scrolled - startPos) : 0;// Current value scrolled from start of longest element
      var scrollX   = sLock/lHeight; // Scroll multiplier
      var sPos  = ((lScrolled * scrollX) <= sLock) ? (lScrolled * scrollX) : sLock;// Scroll position for the shortest element
      short.css({transform: 'translate3d(0,' + sPos + 'px,0'});
    }
});

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var sb=$（'.sidebar'）；
var mn=$（'.main'）；
var cn=$（'.container'）；
var height=$（window.height（）；
var mnStart=mn.offset（）.top；
var mnHeight=mn.height（）；
var sbHeight=sb.height（）；
var sbLock=cn.height（）-sb.height（）；
var scrolled=$（窗口）.scrollTop（）；
var sbScroll=-（滚动的-mnStart）*（（height-mnHeight）/（height-sbHeight））；
如果（滚动>=mnStart&&SBCROLL sbLock）{
某人({
变换：“translate3d（0，+sbLock+px，0”
});         
}
});
});

如果你看一下这把小提琴，把它和这把小提琴比较一下，你会发现这个脚本并不能很好地适应主要内容长度的变化

我试图找出如何计算所需的乘法因子，以使边栏平滑滚动，直到达到与主要内容相同的底部位置。如示例1所示。

我能得到的最好结果是：

$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.main').css('top',-(scrolled*0.1)+'px');
$('.sidebar').css('top',-(scrolled*0.2)+'px');
}

请记住，这是一个非常简单的方法，但是侧边栏在视图中停留的时间更长，您可以使用函数参数，看看会发生什么，是的，固定css位置，否则这将不起作用。这需要一些css规则来保持整洁，但JS功能可以工作

另一种选择是在侧栏上设置一个计时器，使其在给定时间和滚动位置后淡入淡出或变换，如下所示：

我能得到的最好结果是：

$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.main').css('top',-(scrolled*0.1)+'px');
$('.sidebar').css('top',-(scrolled*0.2)+'px');
}

另一种选择是在侧栏上设置一个计时器，使其在给定时间和滚动位置后淡入淡出或变换，如下所示：

重新开始这方面的工作，并找到了适合我需要的解决方案

我想也许其他人会好好利用它

HTML

<div class="header">
</div>
<div class="container">
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="sidebar">
    1
    <br />2
    <br />3
    <br />4
    <br />5
    <br />6
    <br />7
    <br />8
    <br />9
    <br />10
    <br />11
    <br />12
    <br />13
    <br />14
    <br />15
    <br />16
    <br />17
    <br />18
    <br />19
    <br />20
    <br />21
    <br />22
    <br />23
    <br />24
    <br />25
    <br />26
    <br />27
    <br />28
    <br />29
    <br />END
  </div>
</div>
<div class="footer">
</div>
</div>

.header {
  width: 100%;
  min-height: 300px;
}
.container {
  margin: 0 auto;
  width: 80%;
  overflow:hidden;
  background-color: #FF00FF;
  display: block;
}
.main {
  width: 65%;
  float: left;
  min-height: 800px;
  background-color: #00ff00;
}
.sidebar {
  width: 30%;
  float: right;
  min-height: 400px;
  background-color: #ff0000;
}
.container.fixed .sidebar {}
.footer {
  clear: both;
  min-height: 2000px;
  width: 100%;
}

  $(document).ready(function() {
    $(window).scroll(function() {
      var sb = $('.sidebar');
      var mn = $('.main');
      var cn = $('.container');
      var height = $(window).height();
      var mnStart = mn.offset().top;
      var mnHeight = mn.height();
      var sbHeight = sb.height();
      var sbLock = cn.height() - sb.height();
      var scrolled = $(window).scrollTop();
      var sbScroll = -(scrolled - mnStart) * ((height - mnHeight) / (height - sbHeight));
      if (scrolled >= mnStart && sbScroll <= sbLock) {
        sb.css({
          transform: 'translate3d(0,' + sbScroll + 'px,0'
        });
      } else if (scrolled < mnStart){
        sb.css({
          transform: 'translate3d(0,' + 0 + 'px,0'
        });
      } else if (sbScroll > sbLock){
        sb.css({
          transform: 'translate3d(0,' + sbLock + 'px,0'
        });         
      }
    });
  });

.header {
  width: 100%;
  min-height: 300px;
}

.container {
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
  background-color: #FF00FF;
  display: block;
}

.main {
  width: 65%;
  float: left;
  min-height: 8000px;
  background-color: #00ff00;
}

.sidebar {
  width: 30%;
  float: right;
  min-height: 400px;
  background-color: #ff0000;
}

.container.fixed .sidebar {}

.footer {
  clear: both;
  min-height: 2000px;
  width: 100%;
}

  $(document).ready(function() {
    $(window).scroll(function() {
        slowScroll('.main','.sidebar');
    });
    function slowScroll(obj1, obj2) {
      var long, short;
      if ($(obj1).height() > $(obj2).height()) {
        long = $(obj1);
        short = $(obj2);
      } else {
        long = $(obj2);
        short = $(obj1);
      }
      var lHeight   = long.height(); // Height of longest element
      var sHeight   = short.height(); // Height of shortest element
      var sLock     = lHeight - sHeight; // What position from top the shortest element should lock in at
      var startPos  = long.offset().top; // The start position relevant to document (offset from top)
      var scrolled  = $(window).scrollTop(); // Current value scrolled from top
      var lScrolled = ((scrolled - startPos) >= 0) ? (scrolled - startPos) : 0;// Current value scrolled from start of longest element
      var scrollX   = sLock/lHeight; // Scroll multiplier
      var sPos  = ((lScrolled * scrollX) <= sLock) ? (lScrolled * scrollX) : sLock;// Scroll position for the shortest element
      short.css({transform: 'translate3d(0,' + sPos + 'px,0'});
    }
});

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
slowScroll（'.main'，'.sidebar'）；
});
功能slowScroll（obj1、obj2）{
var长、短；
如果（$（obj1.height（）>$（obj2.height（））{
长=$（obj1）；
短期=$（obj2）；
}否则{
长=$（obj2）；
短=美元（obj1）；
}
var lHeight=long.height（）；//最长元素的高度
var sHeight=short.height（）；//最短元素的高度
var sLock=lHeight-sheigh；//最短元素应该锁定在顶部的哪个位置
var startPos=long.offset（）.top；//与文档相关的开始位置（从顶部偏移）
var scrolled=$（窗口）.scrollTop（）；//当前值从顶部滚动
var lScrolled=（（scrolled-startPos）>=0）？（scrolled-startPos）：0；//从最长元素开始滚动的当前值
var scrollX=sLock/lHeight；//滚动乘数
var sPos=（（lScrolled*scrollX）再次从一开始就做了这方面的工作，并找到了适合我需要的解决方案
我想也许其他人会好好利用它
HTML
<div class="header">
</div>
<div class="container">
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="sidebar">
    1
    <br />2
    <br />3
    <br />4
    <br />5
    <br />6
    <br />7
    <br />8
    <br />9
    <br />10
    <br />11
    <br />12
    <br />13
    <br />14
    <br />15
    <br />16
    <br />17
    <br />18
    <br />19
    <br />20
    <br />21
    <br />22
    <br />23
    <br />24
    <br />25
    <br />26
    <br />27
    <br />28
    <br />29
    <br />END
  </div>
</div>
<div class="footer">
</div>
</div>

JS
.header {
  width: 100%;
  min-height: 300px;
}
.container {
  margin: 0 auto;
  width: 80%;
  overflow:hidden;
  background-color: #FF00FF;
  display: block;
}
.main {
  width: 65%;
  float: left;
  min-height: 800px;
  background-color: #00ff00;
}
.sidebar {
  width: 30%;
  float: right;
  min-height: 400px;
  background-color: #ff0000;
}
.container.fixed .sidebar {}
.footer {
  clear: both;
  min-height: 2000px;
  width: 100%;
}

  $(document).ready(function() {
    $(window).scroll(function() {
      var sb = $('.sidebar');
      var mn = $('.main');
      var cn = $('.container');
      var height = $(window).height();
      var mnStart = mn.offset().top;
      var mnHeight = mn.height();
      var sbHeight = sb.height();
      var sbLock = cn.height() - sb.height();
      var scrolled = $(window).scrollTop();
      var sbScroll = -(scrolled - mnStart) * ((height - mnHeight) / (height - sbHeight));
      if (scrolled >= mnStart && sbScroll <= sbLock) {
        sb.css({
          transform: 'translate3d(0,' + sbScroll + 'px,0'
        });
      } else if (scrolled < mnStart){
        sb.css({
          transform: 'translate3d(0,' + 0 + 'px,0'
        });
      } else if (sbScroll > sbLock){
        sb.css({
          transform: 'translate3d(0,' + sbLock + 'px,0'
        });         
      }
    });
  });

.header {
  width: 100%;
  min-height: 300px;
}

.container {
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
  background-color: #FF00FF;
  display: block;
}

.main {
  width: 65%;
  float: left;
  min-height: 8000px;
  background-color: #00ff00;
}

.sidebar {
  width: 30%;
  float: right;
  min-height: 400px;
  background-color: #ff0000;
}

.container.fixed .sidebar {}

.footer {
  clear: both;
  min-height: 2000px;
  width: 100%;
}

  $(document).ready(function() {
    $(window).scroll(function() {
        slowScroll('.main','.sidebar');
    });
    function slowScroll(obj1, obj2) {
      var long, short;
      if ($(obj1).height() > $(obj2).height()) {
        long = $(obj1);
        short = $(obj2);
      } else {
        long = $(obj2);
        short = $(obj1);
      }
      var lHeight   = long.height(); // Height of longest element
      var sHeight   = short.height(); // Height of shortest element
      var sLock     = lHeight - sHeight; // What position from top the shortest element should lock in at
      var startPos  = long.offset().top; // The start position relevant to document (offset from top)
      var scrolled  = $(window).scrollTop(); // Current value scrolled from top
      var lScrolled = ((scrolled - startPos) >= 0) ? (scrolled - startPos) : 0;// Current value scrolled from start of longest element
      var scrollX   = sLock/lHeight; // Scroll multiplier
      var sPos  = ((lScrolled * scrollX) <= sLock) ? (lScrolled * scrollX) : sLock;// Scroll position for the shortest element
      short.css({transform: 'translate3d(0,' + sPos + 'px,0'});
    }
});

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
slowScroll（'.main'，'.sidebar'）；
});
功能slowScroll（obj1、obj2）{
var长、短；
如果（$（obj1.height（）>$（obj2.height（））{
长=$（obj1）；
短期=$（obj2）；
}否则{
长=$（obj2）；
短=美元（obj1）；
}
var lHeight=long.height（）；//最长元素的高度
var sHeight=short.height（）；//最短元素的高度
var sLock=lHeight-sheigh；//最短元素应该锁定在顶部的哪个位置
var startPos=long.offset（）.top；//与文档相关的开始位置（从顶部偏移）
var scrolled=$（窗口）.scrollTop（）；//当前值从顶部滚动
var lScrolled=（（scrolled-startPos）>=0）？（scrolled-startPos）：0；//从最长元素开始滚动的当前值
var scrollX=sLock/lHeight；//滚动乘数
变量sPos=（（lScrolled*scrollX）谢谢你的回答。至于第一个选项：是的，我可以在一定程度上使用固定定位，但由于它的局限性，我宁愿避免这种情况。我也研究了你设置固定乘法因子的选项，但效果因文章而异。你的第二个选项是我假设的“移动"侧边栏，我不确定它如何解决我的问题，侧边栏内容扩展到视图之外，因为这应该随着用户在页面上向下滚动而变得可见。尽管我不认为它解决了任何问题，但我感谢您的输入。感谢您的回复。至于第一个选项：是的，我可以在一定程度上使用固定定位，但是w由于它的局限性，我宁愿避免这种情况。我也研究了您设置固定乘法因子的选项，但效果因文章而异。您的第二个选项是我假设的“移动”