如何在窗口滚动时移动div的位置

Question

我有一个jQuery函数，可以在滚动页面时上下移动一些div，以下是代码 ->

$(window).scroll(function() {
  $(".mydiv").css({
    "margin-top": ($(window).scrollTop()) + "px",
    "margin-left": ($(window).scrollLeft()) + "px"
  });
});

这段代码只适用于一个div，例如：->

<div class="mydiv">This div works</div>
<div class="mydiv">This div takes a high distance from above div and goes down</div>

$(window).scroll(function() {
  $(".mydiv").css({
    "margin-top": ($(window).scrollTop()) + "px",
    "margin-left": ($(window).scrollLeft()) + "px"
  });
});

body {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv">This div works</div>
<div class="mydiv">This div takes a high distance from above div and goes down</div>

- Aniket Singh

---

似乎是与CSS相关的问题。您的样式表文件中是否有其他规则？ - Enrico

不，当我回到页面顶部时，它会在 div 之间创建 282 像素的差异。 - Aniket Singh

Answer 1

你应该使用 "position: absolute"， "top" 和 "left" 来替代边距。使用边距会让它们互相推开，使页面变得非常大。

$(window).scroll(function() {
  $(".mydiv").css({
    "top": ($(window).scrollTop()) + "px",
    "left": ($(window).scrollLeft()) + "px"
  });
});

请查看这个Codepen - http://codepen.io/dmoojunk/pen/JXBaXm。

- dmoo

---

你好！ 我在这个解决方案中遇到了一个问题，就是当光标停留在“.mydiv”元素上时，无法滚动。 有没有什么办法可以解决这个问题？ - Bartłomiej

Answer 2

Weave: http://kodeweave.sourceforge.net/editor/#3bc95f551a4e9cf7c52418361b4be806

这里有一个简单的解决方案，只需用#scroll替换.mydiv。

虽然你可以在CSS中做到这一点，所以我不明白为什么需要JS。

$(window).scroll(function() {
  $("#scroll").css({
    "margin-top": ($(window).scrollTop()) + "px",
    "margin-left": ($(window).scrollLeft()) + "px"
  });
});

body {
  height: 1176px;
  padding: 1em;
  font-size: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="scroll">This div works</div>
<div class="mydiv" id="scroll">This div takes a high distance from above div and goes down</div>

- Michael Schwartz

Answer 3

这里有一个简单的解决方案，只需添加此js代码

(function() {
var delay = false;

$(document).on('mousewheel DOMMouseScroll', function(event) {
    // event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},100)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByClassName('mydiv');
    if(wd < 0) {
        for(var i = 0 ; i < a.length ; i++) {
            var t = a[i].getClientRects()[0].top;
            
            if(t >= 40) break;
            
        }
    }
    else {
        for(var i = a.length-1 ; i >= 0 ; i--) {
            var t = a[i].getClientRects()[0].top;
             
            if(t < -20) break;
            
        }
    }
    if(i >= 0 && i < a.length) {
        $('html,body').animate({
            scrollTop: a[i].offsetTop
        });

    }
});
})();

.fake-container{height: 100vh;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="scroll">scroll 1</div>
<div class="mydiv" id="scroll">scroll 2</div>

- Ivan Acosta