如何在窗口滚动时上下移动div

Question

I have a jquery function to move some div up and down while scrolling the page here is the code ->

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

This above code only works on one div like ->

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

Answer 1

You should be using 'position: absolute' and 'top' and 'left' instead of margins. By using margins you are pushing them off each other making them make the page massive.

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

See this codepen - http://codepen.io/dmoojunk/pen/JXBaXm

Answer 2

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

Here's a simple solution. Replacing .mydiv with #scroll .

Although you can do it in CSS. So I don't see why you need JS for this.

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

Answer 3

Here's a simple solution just add this 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>