wie div bewegen nach oben und unten auf dem Fenster blättern

Question

Ich habe eine jQuery-Funktion einige div nach oben und unten beim Scrollen der Seite hier ist der Code zu bewegen ->

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

Das obige Code nur auf einem div arbeitet wie ->

<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

Sie mit 'position: absolute' werden sollen, und 'top' und statt Margen 'links'. Durch die Verwendung von Rändern schubst du sie voneinander ab, wodurch sie die Seite massiv machen.

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

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

Answer 2

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

Hier ist eine einfache Lösung. Ersetzen .mydiv durch #scroll.

Obwohl Sie es in CSS tun können. Ich sehe also nicht, warum du JS dafür brauchst.

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