如何更改滚动元素的位置？答案

【问题标题】：How to change position of the element on scroll?如何更改滚动元素的位置？
【发布时间】：2024-05-21 18:00:02
【问题描述】：

我想同时改变top属性的值我滚动。我不想使用position: fixed。我用position: absolute。

我想在每次向下滚动时将1px 添加到box。

我想在每次向上滚动时将1px 删除到box。

如何做到这一点？

<div id="box" style="position: absolute">
   // content
</div>

$(document).bind('scroll', function(){ 
    $("#box").css("top", ..... ); 
});

【问题讨论】：

所以你不想使用 position:fixed what 实际上你需要做什么（假设你希望框保持在相同的位置，无论你如何滚动），但你想过度 -通过使用 javascript 来测量您的滚动距离并相应地修改您的“顶部”值来使事情复杂化？..我不知道你为什么要让你的东西变得不必要地困难..
你有没有尝试捕捉 onscroll ？只需保存位置，然后与新位置进行比较。
@julesanchez 你是怎么做到的？
@steffi : all is on answers 1. 添加侦听器到滚动 2. 使用 scrollTop 获取位置 3. 与滚动的先前值比较（如果变量不为空） 4. 在全局变量中保存新位置
@doniyor 是的，我知道。不用担心。我只是等待是否有另一个答案出现。 :)

标签： jquery css scroll window

【解决方案1】：

你可以这样做，

$(window).on('scroll', function(){
  change_box_css();
});

function change_box_css(){
 //FF
 $('#box').bind('DOMMouseScroll', function(e){
 if(e.detail > 0) {
     //scroll down -> set css top
 }else {
     //scroll up   -> set css top
 }

 });

  //IE, Opera, Safari
 $('#box').bind('mousewheel', function(e){
 if(e.wheelDelta < 0) {
     //scroll down -> set css top

 }else {
     //scroll up -> set css top

 }

 });

 }

现在您应该根据自己的意愿设置 css 顶部

【讨论】：

好的，但是这里如何区分向上滚动和向下滚动呢？
这对浏览器来说是一个非常繁重的方法:( “将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意。” John Resig。看看最佳实践段：ejohn.org/blog/learning-from-twitter
你是对的.. 但这取决于附加的处理程序做了什么以及做了多少.. 只是设置 css 并不是什么大问题..

【解决方案2】：

你可以使用：

$(document).ready(function(){

    $("#box").on('scroll', function(){

          $(this).css('top',$(document).scrollTop());
    });
});

尽管我同意你应该使用position: fixed，除非你试图让 div 在用户滚动页面时“关注”用户，例如侧边栏或其他东西。

【讨论】：