CODEWITHSUNDEEP
javascriptjquery
Aniket Singh
Aniket Singh

Reputation: 877

how to move div up & down on window scroll

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>

Upvotes: 6

Views: 18891

Answers (3)

Ivan Acosta
Ivan Acosta

Reputation: 1

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>

Upvotes: 0

dmoo
dmoo

Reputation: 1529

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

Upvotes: 8

Michael Schwartz
Michael Schwartz

Reputation: 8425

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>

Upvotes: 0

Related Questions